Question

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

我需要设置＆＃34; src＆＃34; javascript中的图像标记的属性来自我通过ajax调用检索到我的控制器的字节数组。我必须做这个客户端，因为我正在动态构建一些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);
        }
    });
}

图像在＆＃34; imgFromModel＆＃34;中正确加载标记，但不是来自脚本（＆＃34; imgFromScript＆＃34;标记）。有人可以告诉我如何从控制器方法加载（设置＆＃34; src＆＃34; attr）一个字节数组到图像标签中？

提前感谢您的帮助

Answer 1

经过大量的游戏，一个美好的夜晚和一点运气，这就是解决方案。

我需要在我的模型中添加一个字符串属性，称之为＆＃34; ImageBytesAsString＆＃34;并将src设置为我的ajax响应中的src。这是代码..

MODEL：

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

我希望这有助于某人。

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

1 个答案: