如何使用 Base64 编码图像作为 img 标签的来源？答案

【问题标题】：How to use Base64 Encoded Image as img tag's source?如何使用 Base64 编码图像作为 img 标签的来源？
【发布时间】：2019-03-26 04:34:15
【问题描述】：

现在，我正在使用 BASE64 制作缩略图页面。

我将图像存储在服务器上，并在客户端将它们作为 Base64 回调。

我想将这些 Base 64 编码的 Img 用作 src。它运行良好

。但是，我犯了这样的错误

GET http://localhost:8080/%7B%7Bitem.THUMBNAIL%7D%7D 404

什么问题？使用base64作为src而不进行任何转换是正确的方法吗？

这是我的来源

脚本

   $http.get( "app/dashboard/recentWithInfo").then( function( rtn) {
            rtn.data.map( item => {

                if( item.THUMBNAIL){
                    item.THUMBNAIL = "data:image/png;base64," +item.THUMBNAIL.body;
                }
            })
            $scope.items = rtn.data;
        });

HTML

 <img class="block-thumbnail-img" ng-if="item.THUMBNAIL != null" src="{{item.THUMBNAIL}}">
 <h2 ng-if="item.THUMBNAIL == null" style="color:#ccc"> No THUMBNAIL</h2>

另外，我使用 Springboot 和 AngularJS。提前致谢！

【问题讨论】：

标签： html angularjs image base64

【解决方案1】：

是的，您可以使用 base64 图像，但要使图像更小，数量更少。下面是基本代码，其中 base64 图像被调用到 html 页面中并呈现

<div>
    <p>Taken from wikpedia</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

检查小提琴http://jsfiddle.net/hpP45/

【讨论】：

感谢您的回复。我只是猜测直接使用base64图像是正确的方法，因为它太长了。无论如何，您知道为什么会出现此错误消息吗？？
参考这个链接你会更清楚stackoverflow.com/questions/10473932/…