html - 如何使用Base64编码图片作为img标签的来源？

Question

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

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

我想使用这些 Base 64 编码的 Imgs 作为 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。 提前致谢!

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

检查 fiddle http://jsfiddle.net/hpP45/