解决Vue 没有static目录无法动态加载图片的404问题

最近在写毕设，接触到的Vue。   发现vue -V   2.9.6 版本的项目目录下面没有所谓的build 目录也没有static目录。下面是我的项目目录结构。

1.首先说一下，我没有改配置。这个目录结构有main.js   webpack.config.js这两个主要的配置文件。在解决这个问题时我没有做任何修改。

2.我想实现的是数据库里面存的图片路径，然后在img标签中src属性直接显示图片。

(1)我先使用直接src的方式

<img style="border-radius: 50%" width="90px" height="90px" src="./chat.jpg"> 这样是可以显示的。即使在同级目录也要加上

./  这个点和杠。

下面是不加点和杠的结果。404   <img style="border-radius: 50%" width="90px" height="90px" src="chat.jpg">

加完  ./  后就可以展示了。  但是这种方式是静态的，并不是动态的。

(2)使用require 。  我没有使用这种方式。

(3)使用static目录。这个在查解决方法的时候有好多个文章写得乱码七糟的。我也没找到真正能解决的。原则就是这个目录的文件不经过base编码、直接放到打包的文件夹出。这样就可以动态使用了。

目录位置参照文首图片。是在项目目录下创建static目录。也就是 src的同级目录下创建的。创建错位置是不好使的(可能创建错位置需要配置吧)。

然后我数据库里面的图片路径是这么写的。

这样在img标签中就可以直接使用了。

<img style="border-radius: 50%" width="90px" height="90px" :src="doctor.doctorImg" >   注意src前面的 ：

注：对于我的使用我遍历了doctors这个数组。这个数据的遍历变量是doctor  然后doctor里面的属性是doctorImg

doctors 可以看成{[doctorImg:'/static/q.png'],[doctorImg:'/static/w.png']}  

亲测好用。我就是这么解决的。这样就能根据数据库中不同的图片目录展示出不同的图片了。

有问题欢迎探讨。