传递base64格式给前端 解决Not allowed to load local resource问题

（一）怎么引起的错误

后端传过来的是一个这样的地址。

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

那么根据这个特性，我们后端还是一样可以传递完整的图片地址，只不过图片只能存放在你运行的程序文件夹下，在传递过来后，我们前端只用将前面的地址前缀给裁剪掉即可。