Javascript (MVC) 从数据库加载图像(字节数组)
Javascript (MVC) load image (byte array) from database
这个问题在 Stack 上有很多答案,但 none 对我有用...
我需要在 javascript 中设置图像标签的 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);
}
});
}
图像在 "imgFromModel" 标签中正确加载,但不能从脚本("imgFromScript" 标签)中加载。有人可以告诉我如何将字节数组从控制器方法加载(设置 "src" 属性)到图像标签中吗?
提前感谢您的帮助
经过大量的游戏,睡个好觉,再加上一点运气,这里是解决方案。
我需要向我的模型添加一个字符串 属性,将其命名为 "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=""/>
我希望这对某人有所帮助。
这个问题在 Stack 上有很多答案,但 none 对我有用...
我需要在 javascript 中设置图像标签的 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);
}
});
}
图像在 "imgFromModel" 标签中正确加载,但不能从脚本("imgFromScript" 标签)中加载。有人可以告诉我如何将字节数组从控制器方法加载(设置 "src" 属性)到图像标签中吗?
提前感谢您的帮助
经过大量的游戏,睡个好觉,再加上一点运气,这里是解决方案。
我需要向我的模型添加一个字符串 属性,将其命名为 "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=""/>
我希望这对某人有所帮助。