Как передать URL в тег <img>из Webapi, чтобы принять изображение base64?

Question

Как передать URL из Webapi в тег <img>. Я преобразовал изображение в base64 string и вставил в Database как varbinary.

<img src="https://localhost:44381/api/Account/get-resource-image;data:image/jpg;base64" alt="img"/>

Answer 1

Вам нужно добавить data:image/png;base64 в начале конечной точки Webapi в <img> src, а не после. См. Приведенный ниже код.

<img src="data:image/jpg;base64,https://localhost:44381/api/Account/get-resource-imagedata" alt="img"/>

Другой способ добиться того же:

JQuery:

$.ajax({
        url: 'https://localhost:44381/api/Account/get-resource-imagedata',
        type: "GET",
        success: function (data) {
            $('#imgImage').attr('src', data);
        }
});

В HTML:

<img id="imgImage" src="#" alt="img"/>

Answer 2

Используйте angularjs ng-src. Сначала выполните запрос GET в вашем контроллере, а затем сохраните ответ в переменной, чтобы использовать его с ng-src:

$http.get('https://localhost:44381/api/Account/get-resource-imagedata').then(function(response) {
    $scope.image = response.data;
});

В шаблоне:

<img data-ng-src="data:image/jpg;base64,{{image}}" alt="img"/>

Answer 3

Вот пример для отображения изображений base64.

<img src="data:image/jpeg;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOX"/>