如何将 URL 传入<img>来自 Webapi 的标签以接受 base64 的图像？

Question

如何将 URL 从Webapi传递到<img>标签。 我已将图像转换为base64 string并作为varbinary插入Database 。

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

Answer 1

您需要在<img> src 中的 Webapi 端点的开头而不是之后添加data:image/png;base64 。 请参阅下面的代码。

<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 。 首先在 controller 中执行 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"/>