从后端显示来自 base64 的不同格式的图像 api - angular 7

Question

我有一个 api，我将在其中获取 base64 格式的图像，它可以是任何格式（.png、.jpg、.svg 等...）。

我想在我的应用程序中使用以下方式显示图像：

  <img *ngIf="imageBase64" [src]="imageBase64 ? ('data:image/svg+xml ;base64,' +imageBase64 | safe) : ''" alt="" />

如何以最佳方式显示不同格式的图像。

提前致谢。

示例

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI+DQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI+DQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8+DQo8L2c+DQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8+DQo8L2c+DQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8+DQo8L2c+DQo8L3N2Zz4=

以上是base64格式的.svg文件

所以在 src 属性绑定中，如果我给出 data:image/svg+xml，它会起作用，我需要一个通用格式来打印图像，即使它是 png 格式等...

如 data:image/svg+xml/png/jpg 等...这不起作用

Answer 1

试试这个：

<img *ngIf="imageBase64" [src]="imageBase64.base64">

Answer 2

您必须创建一个函数，首先对编码字符串进行解码，然后在提供一组有限的类型选项的情况下从解码字符串中提取类型。

getType(imageBase64) { 
    let extension = undefined; 
    const decodedString = window.atob(imageBase64); //decode the string;
    const lowerCase = decodedString.toLowerCase();
    // find the extension in the decoded string
    if (lowerCase.indexOf("png") !== -1) extension = "png"
    else if (lowerCase.indexOf("svg") !== -1) extension = "svg+xml"
    else if (lowerCase.indexOf("jpg") !== -1 || lowerCase.indexOf("jpeg") !== -1)
        extension = "jpg"
    // add more cases if needed..
    return extension;
}

然后在您的模板中使用此功能。

<img *ngIf="imageBase64" [src]="imageBase64 ? ('data:image/' + getType(imageBase64) + ';base64,' +imageBase64 | safe) : ''" alt="" />

从后端显示来自 base64 的不同格式的图像 api - angular 7

Display images of different formats from base64 from backend api - angular 7

image

typescript

angular

angular7