在一个 img src 标签上显示不同格式的普通图像，以及 base64 图像

Posted 2023-03-15

【中文标题】在一个 img src 标签上显示不同格式的普通图像，以及 base64 图像

【英文标题】：Display on one img src tag normal images on different formats, and base64 images

【发布时间】：2013-01-14 09:14:48

【问题描述】：

我正在使用javascript 在html 上显示图像，该图像来自WS 以base64 编码。在少数情况下，我得到png、gif、jpg 格式的图像并希望显示它们在同一个<img src= > 标签中。

$("#testImage").append("<img src=\"data:image/png;base64," +imgSRC+"">);

其中 imgSRC 是 base64 图像。

1.如何使用一个<img src>标签在同一个img src标签上显示base64图片和普通图片？或者当我现在返回的imgSRC 是jpg/png 时更改此标签...图像。例如，当我得到关于图像的返回值时，如果它是 base64 或正常： append("<img src=\"data:image/png;base64," +checkImageFormat(imgSRC)+"">);

如何通过checkImageFormat(imgSRC)的结果改变当前对象的img src标签？

【问题讨论】：

查看这篇博文：danielmclaren.com/node/90。基本上在FF，是的，你可以。在 IE 中，您需要在服务器上解码 base64 并使用正确的内容类型标头返回它。

请查看本教程：blog.team-noir.net/2010/03/…

谢谢，那些解释如何使用数据属性设置base64 图像的教程...很好，我要问的是当我有<img src="data:image/png;base64,imgSRC"> 并且我得到imgSRC 作为正常图像时，如何将此行更改为：<img src= "imgSRC">，因为它是一个用“，”拆分的属性，我不能只删除该属性，因为它看起来像：<img src=",imgSRC">

'ata:image/png;base64,imgSRC'.replace(/^(data:image/(png|gif|jpg);)base64,/gi, );

ata:... 那是什么？如果我从这样的函数返回值：returnImageType(imgSRC) 如何更改当前<img src>

的选项卡

【参考方案1】：

我建议将“data:image/png;base64”部分也存储在数据库中（或任何来源）。这样你就不必检查了。

另一种解决方案可能是这样的：

$(function()

    var $img = $('<img/>')
                   .attr( src: 'data:image/png;base64,' + imgSrc )
                   .error(function()
                        $(this).attr( src: imgSrc ); 
                        //If we end up here the image couldn't be loaded 
                        //If so, we assume that its a jpeg/png/gif
                    );

    $("#testImage").append($img);

);