图片路径前缀有blob？图片渲染不出来？

知识储备

• 什么是Blob? 一种Javascript的对象类型。

写bug

你们遇见过这种图片路径咩

就很奇葩吧哈哈因为我图片渲染不出来~

好像我保存之后就有这个 数据库也是有这个前缀

我的代码是这样的：

handleAvatarSuccess(response, file, fileList) {
   const url = "http://localhost:7001" + file.response.url;
   console.log(url, "------------------------");
   this.image = URL.createObjectURL(file.raw);
｝

后来我尝试了一下重新发布一个动态：图片显示出来了，诡异吧

更诡异的是，刷新之后又没了~过山车的心情！！！

解决

然后我就去看了一堆推文然后再看看自己找之前写的项目：

把

this.image = URL.createObjectURL(file.raw);

换成

this.image = url;

就成功了

原因

问了下AI原因：

如果数据库的图片地址前缀带有blob://，那么可能是因为在上传图片时，使用了Blob URL来表示图片。在JavaScript中，Blob URL是通过URL.createObjectURL(blob)方法创建的，其格式为blob://加上一个由浏览器自动生成的32位十六进制的字符串。用Blob URL表示的图片是存储在浏览器的内存中，而不是存储在硬盘上，所以当你在另一个页面中打开这个URL时，就无法访问该图片。

如果需要在其他页面中打开这些图片，可以考虑在上传图片时，保存其二进制数据到数据库中，然后在其他页面中使用这些二进制数据来构造图片。具体实现可以参考base64编码方式或者其他方式来实现。

参考

vue中接受后台传过来的图片文件流blob前端进行展示实现方法

vue异步获取图片流文件进行图片显示