Question

现在，我正在使用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。预先感谢！

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>

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

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

1 个答案: