問題:
當圖片無法顯示時,在瀏覽器控制檯中查看圖片的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"