vue从数据库获取图片地址，为什么图片地址为变量时找不到图片？

vue展示以变量地址的文件

vue新手

刚开始学习vue的同学，可能会遇到一个问题，为什么当图片的地址为一个变量的时候，图片就找不到了呢？

接下来我就讲述一下我的解决方法，及思路。

首先，我们打开浏览器，看一下图片的地址有什么不同
我们直接在代码中引用相对地址的图片：
	**url(/static/img/orange.c394161fd7b13a2140b42aaa1b605804.jpg)**
我们从数据库里面获取数据：
	**url(/static/img/orange.jpg)**

比较上面的两个地址，直接引用的图片会在orange的后面多了一串我们看不懂的字符串，那为什么会这样呢？

当我们了解一下vue的编译情况后，我们会知道，我们之前所放在assets中的所有图片，编译后都会放在static下，同一个文件夹img中。但是，我们在assets中不同的文件夹下面是可以有相同名称的图片的。那么编译后，它们会在同一个文件夹下，我们应该如何分辨是哪个图片呢？
这个时候，vue的配置文件webpack.base.conf.js中就会给我们解决这个问题。
name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)
[name]：图片的原名称
[ext]：文件的原后缀名
[hash:7]：添加一个7字节的hash值

所以就是，为了区别两个同名的图片，就会在图片名称的后面添加一个hash值的字符串。
这也就是为什么当我们使用变量来表示图片地址的时候，这个没有后面的hash值，所以图片也就找不到了。
那么如何解决这个问题呢？
很简单，我们只要把name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)中的hash值去掉就不会产生hash值了
改为name: utils.assetsPath(‘img/[name].[ext]’)
这个时候我们再看一下浏览器中的图片地址，将不会有hash值了。
相同的，不仅是图片如此，多媒体资源文件，字体资源文件等都会产生hash值。所以当我们遇到这类问题是，就以相同的方法解决。希望能对您带来帮助，谢谢观看。