Как использовать закодированное изображение Base64 в качестве источника тега img?

Question

Теперь я создаю миниатюры страниц, используя BASE64.

Я храню Image на сервере и перезваниваю им как Base64 на клиенте.

Я хочу использовать эти Imgs в кодировке Base 64 в качестве src.Это хорошо работает

.но я получил ошибку, как это

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

в чем проблема?и это правильный способ использовать base64 в качестве src без каких-либо преобразований?

вот мой источник

Script

   $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/