Vue中img的src屬性綁定問題

使用v-bind綁定一個img元素的src屬性:

<img v-bind:src="Url"/>
Url = './assets/logo.png'

按道理此時圖片應該正常加載纔對,但奇怪的事情出現了,圖片加載失敗。查看網頁源代碼,發現一個錯誤:
http://localhost:8080/src/assets/logo.png 404 (Not Found)
我們可以看到此時img的路徑將網站根域名作爲了相對路徑的根目錄,此時路徑錯誤,圖片無法加載。
至於原因,是因爲Vue代碼通過構建工具打包後,文件的路徑會發生變化
解決方法:
根據vue-cli的文件結構,其中有一個叫做static的文件夾,將logo.png放入這個文件夾,然後修改Url:

Url = '/static/logo.png'

圖片成功加載. 執行npm run build後查看dist文件,可以看到有logo.png文件。
總結:圖片一類的靜態文件,應該放在這個static文件夾下,這個文件夾下的文件(夾)會按照原本的結構放在網站根目錄下。這時我們再去使用/static絕對路徑,就可以訪問這些靜態文件了。

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