如何将 URL 从 Webapi 传递到 <img> 标签以接受 base64 的图像？

Posted 2023-04-13

【中文标题】如何将 URL 从 Webapi 传递到 <img> 标签以接受 base64 的图像？

【英文标题】：How to pass URL into <img> tag from Webapi to accept image of base64?

【发布时间】：2020-02-01 10:49:36

【问题描述】：

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

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

【问题讨论】：

请为该问题添加一些代码。这看起来不清楚......

localhost:44381/api/Account/get-resource-image;data:image/…" />

这是我通过 Url 的代码

同时为你的 webapi 函数提供代码。

【参考方案1】：

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

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

实现相同目标的另一种方法：

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

【参考方案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" />

【参考方案3】：

这是一个显示 base64 图像的示例。

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