如何將 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"/>