问题:
当图片无法显示时,在浏览器控制台中查看图片的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"