JavaScript（MVC）从数据库加载图像（字节数组）

Question

在Stack上有很多关于这个问题的答案，但是它们都对我没有用...

我需要从通过ajax调用控制器检索到的字节数组中使用javascript设置图像标签的"src"属性。我必须在客户端完成此操作，因为我正在动态构建一些HTML（在下面简单的示例中未显示）。

这是视图：

<div>
<button onclick=" loadFromDb(); ">CLICK ME</button>
<img id="imgFromModel" src="data:image/png;base64,@Convert.ToBase64String(Model.Image)" alt="" />

<img id="imgFromScript" src="#" alt=""/>
</div>

这是脚本：

function loadFromDb() {
    $.ajax({
        url: "/Home/LoadFromDatabase",
        async: true,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            var base64String = btoa(response.Image);
            $("#imgFromScript").attr("src", "data:image/png;base64," +  base64String);
        }
    });
}

标签中的“imgFromModel”正确加载图像，但脚本（“imgFromScript”标签）无法加载。请问有人能告诉我如何将控制器方法中的字节数组加载到图像标签中（设置“src”属性）吗？

非常感谢您提前的帮助。

- Trenton

Answer 1

经过大量尝试、充足的睡眠和一点运气，我终于找到了解决方案。我需要在我的模型中添加一个字符串属性，称之为“ImageBytesAsString”，并将src设置为我的ajax响应中的该属性。以下是代码：

模型：

public byte[] Image { get; set; }
public string ImageBytesAsString { get; set; }

控制器：

var user = context.Users.FirstOrDefault();
user.ImageBytesAsString = Convert.ToBase64String(user.Image);

JAVASCRIPT:

    $.ajax({
    url: "/Home/LoadFromDatabase",
    async: true,
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        $("#imgFromScript").attr("src", "data:image/png;base64," + response.ImageBytesAsString);
    }
});

查看：

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

我希望这能帮助到某些人。

- Trenton

---

我也尝试过这种方法，但在生产环境中，图片的加载速度非常慢。有什么关于如何实现这个解决方案的想法吗？ - Giamma