vue 在html使用相对路径无法查看图片

问题:

当图片无法显示时,在浏览器控制台中查看图片的url,如:

<img data-v-5f28ad28="" src="./img/b-logo.jpg">

但鼠标悬浮在src上会显示如下:

src="http://localhost:8080/img/b-logo.jpg"

解决:

将图片放到根目录下的static文件夹下,在vue的webpack配置中可以看到:

path.resolve(__dirname, '../static')

 在html中直接写路径:src ="static/img/b-logo.jpg",不用以相对路径的形式来写 。

path.resolve()方法可以将路径或者路径片段解析成绝对路径,也就是说我们这时候访问的路径就是本机的绝对路径了,自然能找到图片了。鼠标悬浮显示如下就能访问了:

src="http://localhost:8080/static/img/b-logo.jpg"

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章