MVC 后端根据图片路径，读取图片成为文件流，显示到页面的img中。（js处理图片文件流，设置到img的src属性中）

1、根据图片名称读取文件流

public static byte[] GetBytesFromImage(string filename)
{
try
{
FileStream fs = new FileStream(filename, FileMode.Open, FileAccess.Read);
int length = (int)fs.Length;
byte[] image = new byte[length];
fs.Read(image, 0, length);
fs.Close();
return image;
}
catch (Exception ex)
{
return null;
}
}

2、直接显示在前端页面

在Controller控制器中添加返回图片的方法

 public FileResult Image()
{
　　
byte[] image = GetBytesFromDB();
　　 return new FileContentResult(image, "image/jpeg");
}

在页面中显示：

<img  src="/Home/Image" />

二、多张图片动态创建img

1、Controller控制器中将图片文件流转为base64字符串

public string GetImg(byte[] b_img)
{
return Convert.ToBase64String(b_img);
}

2、根据多张图片的路径获取成base64字符串的List<string>

    js中通过ajax申请图片list ，然后在容器中动态创建swiper-slide和img

function GetImageResources(pageNum){
$.ajax({
url: "获得图片list<string>的Controller地址",
type: "post",
async: false,
data: { drInfo: drDataObj, pageIndex: pageNum, pageSize: pageSize },
dataType: "json",
success: function (data) {
if (data.Title != "Success") {
alert(data.Content);
return;
} else {
var resourceLists = JSON.parse(data.Content);
console.log("相关资源个数l：" + resourceLists.length);
var cursor = 0;
resourceLists.forEach(function (item) {
cursor++;
$(".swiper-wrapper").append("<div class='swiper-slide'><img style='width:100%;' id='pic_" + cursor + "' /></div>");
console.log("向页面滑动器添加了图片模块");
var src = "data:image/jepg;base64," + item;
$("#pic_" + cursor).attr("src", src);
console.log("图片模块加载图片成功");
});
}
},
})
}

最后

以上就是鲜艳秋天为你收集整理的MVC 后端根据图片路径，读取图片成为文件流，显示到页面的img中。（js处理图片文件流，设置到img的src属性中）的全部内容，希望文章能够帮你解决MVC 后端根据图片路径，读取图片成为文件流，显示到页面的img中。（js处理图片文件流，设置到img的src属性中）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。