Javascript(MVC)从数据库加载图像(字节数组)

Question

这个问题在 Stack 上有很多答案，但没有一个对我有用...

我需要从字节数组中设置 javascript 中图像标签的“src”属性，我通过对 Controller 的 ajax 调用检索该字节数组。我必须在客户端执行此操作，因为我正在动态构建一些 html(在下面的简单示例中未显示)

View 如下:

<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”标签)中加载。有人可以告诉我如何将字节数组从 Controller 方法加载(设置“src”属性)到图像标签中吗？

预先感谢您的帮助

Answer 1

经过大量的游戏、良好的 sleep 和一点运气，这里是解决方案。

我需要向我的模型添加一个字符串属性，将其命名为“ImageBytesAsString”并将 src 设置为我的 ajax 响应中的那个。这是代码..

型号:

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

Controller :

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

我希望这对某人有帮助。