javascript - 在一个 img src 标签上显示不同格式的普通图像和 base64 图像

Question

我正在使用 javascript在 HTML 上显示图像编码为 base64来自 WS。在少数情况下，我在 png 中获得图像, gif , jpg格式并希望以相同的方式显示它们 <img src= >标签。

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

其中 imgSRC 是 base64图片。

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

我怎样才能得到 checkImageFormat(imgSRC) 的结果？更改当前对象的 img src 标签？

Answer 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);

});