(一)怎么引起的错误
后端传过来的是一个这样的地址。
E:\\UploadFile\\Rotation\\4fbc240777c4e589bca5c84fa0c26241.jpg
在将这个图片地址直接在img标签上使用是这样的,同时浏览器报一个错误,这是浏览器的一个安全策略,禁止访问本地文件
(二)解决方法
后端直接传递base64
后端直接将图片转换为base64格式传递给前端,这里以c#为例子,从数据库获取到图片地址,然后再将图片转换为base64格式传递给前端。
//内存缓存注入实现类
private readonly IMemoryCache memoryCache;
public NewItemController(IMemoryCache memoryCache)
{
this.memoryCache = memoryCache;
}
[HttpGet]
public object ItemRotation()
{
object Itemtion = memoryCache.GetOrCreate("Rotation", (x) =>
{
MyDbContext md = new();
var NewRotationsAs = md.Rotations.Select(x => x.RotationName);
List<string> RotationString = new();
WebClient webClient = new();
foreach (var v in NewRotationsAs)
{
byte[] bytes = webClient.DownloadData(v);
string Base64string = Convert.ToBase64String(bytes);
RotationString.Add(Base64string);
}
return new { res = "请求成功", RotationString };
//设置缓存绝对过期时间(1小时)
x.AbsoluteExpirationRelativeToNow = TimeSpan.FromHours(1);
//设置缓存滑动过期时间(5分钟)
x.SlidingExpiration = TimeSpan.FromMinutes(5);
});
if (ItemRotation == null)
{
string err;
return err = "当前请求没有数据";
}
else
{
return Itemtion;
}
}
这样前端获取到的就是一串base64格式的字符串,前端再使用base64的格式将图片展示出来,这样就可以了,就可以将图片展示到页面上了。
created() {
GetRotation().then(res => {
this.RotationImg = res.rotationString
for (let i = 0; i < this.RotationImg.length; i++) {
this.RotationImg[i] = "data:text/html;base64," + res.rotationString[i];
}
}).catch(err => {})
这种方法的弊端
这种方法是有很大的弊端的,我们可以看到原图的大小和我们传递过去的base64字符串的大小是相差很大的,base64传递比我们原图片大小大了百分之30到百分之40之间,这样极大的影响了性能,如果你传输的图片太大且太多,会导致前端页面这些图片会显示的很慢,同样也会影响到同一个后端的其他业务,所以这种方式只推荐传递的图片少且小。
这是原图片
这是base64传过来的
将图片存放在前端代码文件中
还有一个简单的方法,虽然禁止访问本地文件,但是可以访问当前运行程序的文件。
在vue中有两个文件夹可以让我们来存放图片,一个是public文件夹,一个是src下的assets文件夹,public文件夹中我们可以存放页面展示和经常改变的图片,assets文件夹中我们可以用来存放矢量图。我们可以将图片存放在这两个文件夹中。
在vue中有一个专门访问自己这个文件下图片的语法,他可以将前面的地址全部省略掉,只用后面的地址就可以了,例如我把图片存放在了public文件夹中,我可以直接以public开头来表示图片地址,vue会自动帮我们找到这个图片。
<img src="/public/Rotation/4fbc240777c4e589bca5c84fa0c26241.jpg"/>
那么根据这个特性,我们后端还是一样可以传递完整的图片地址,只不过图片只能存放在你运行的程序文件夹下,在传递过来后,我们前端只用将前面的地址前缀给裁剪掉即可。