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

100 阅读 0 评论 66 点赞

我是靠谱客的博主鲜艳秋天，这篇文章主要介绍MVC 后端根据图片路径，读取图片成为文件流，显示到页面的img中。（js处理图片文件流，设置到img的src属性中），现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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控制器中添加返回图片的方法

复制代码

1
2
3
4
5
6
 public FileResult Image()
{
　　
byte[] image = GetBytesFromDB();
　　 return new FileContentResult(image, "image/jpeg");
}

在页面中显示：

复制代码

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

二、多张图片动态创建img

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

复制代码

1
2
3
4
5

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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("图片模块加载图片成功");
});
}
},
})
}