代码之家 › 专栏 › 技术社区 › Anil Kumar Reddy A

从后端API的Base64显示不同格式的图像-Angular 7

angular7 typescript image angular

0

Anil Kumar Reddy A · 技术社区 · 7 年前

我有一个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=

上面是.svg文件的base64格式。

所以在src属性绑定中 data:image/svg+xml ,它会工作,我需要一个通用格式打印图像,即使它是PNG格式等…

喜欢 data:image/svg+xml/png/jpg 等。。。这不管用

0 回复 | 直到 7 年前

1

2

callback 7 年前

您必须创建一个函数,该函数首先对编码的字符串进行解码,然后从解码的字符串中提取类型,并提供有限的类型选项集。

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="" />

2

0

HV Sharma 7 年前

试试这个:

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