vue中图片加载的问题

Question

问题描述

项目中要加载一个图片，图片路径可能会变所以没有直接把路径写死，从data中返回了一个值，动态绑定，结果一直加载不出来， 以下是代码与文件目录。

// 以下是部分代码，第一个img就能加载出来，第二个就不行。

<img src="./pic1.png" alt="资讯图">
<img :src="picUrl" alt="资讯图">
export default {
data () {

return {
  picUrl: 'pic1.png'
} 

}
图片为目录文件，是latestNews.vue模块引用的图。

图片为控制台看到的路径，为什么第一个img的图的路径会有5e3d57b这一段，而且为什么路径显示他是在static目录下。而且当我自己把路径改成这样后，图片也只是/static/img/pic1.png，没有5e3d57b这一段，这是哪里来的，
而且我最想知道的是，，，我现在不把这个路径写死，我该怎么去写路径加载啊。。。

Answer 1

这个 5e3d57b 东西，是 file-loader 帮你做的，如果要定义成变量的话，你得 reuqire('./pic1.png')

Answer 2

js中引入图片路径，请使用require（”图片路径”）

Answer 3

picUrl: require('pic1.png')