解決vue.js圖片資源路徑不正確的方法

本文就是給大家分享一下如何解決vue.js圖片資源路徑錯誤的內容。 小編覺得非常實用，所以分享給大家作為參考，跟著小編一起來看看吧。

vue.js圖片資源路徑不正確的解決辦法： 1、使用v-bind綁定圖片的src屬性； 2、使用導入的圖片路徑； 3、將圖片放入outer文件夾，然后在data Can中定義。

當我們在Vue.js項目中引用圖片時，圖片路徑有以下幾種情況：

使用一個：

在data中定義圖片路徑：

?????imgUrl:'../assets/logo.png'

模板內部：

???

上面是錯誤的寫法，我們應該使用v-bind來綁定圖片的src屬性：

//或者?

這種方式就是按照正常的HTML語法來引用路徑，可以封裝在模板中。

使用兩個：

當我們需要在js代碼中寫入圖片路徑時，如果我們將其寫入data中，則只會被視為字符串，而無法找到圖片地址。

打字錯誤

imgUrl:'../assets/logo.png'

此時我們可以使用導入圖片路徑：

import?avatar?from?'@/assets/logo.png'

數據中定義::

使用三：

我們也可以將圖片放在外層文件夾中，然后在data中定義：

imgUrl?：?'../../static/logo.png'

感謝您的閱讀！ 這篇關于《如何解決vue.js圖片資源路徑錯誤》的文章就分享到這里。 希望以上內容能夠對您有所幫助，讓您學到更多的知識。 如果您覺得文章不錯，可以轉發分享，讓更多人看到！