vue中图片加载的问题

问题描述

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

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

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

return {
  picUrl: 'pic1.png'
} 

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

clipboard.png

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

clipboard.png

阅读 8.4k
3 个回答

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

js中引入图片路径,请使用require(”图片路径”)

picUrl: require('pic1.png')
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题