vue.js圖片資源路徑不正確怎麼辦

vue.js圖片資源路徑不正確的解決方法：1、用v-bind綁定圖片的src屬性；2、使用import引入圖片路徑；3、把圖片放在外層的static資料夾裡面，然後在data裡面定義imgUrl即可。

本教學操作環境：windows7系統、vue2.0版，DELL G3電腦，此方法適用於所有品牌電腦。

【相關文章推薦：vue.js】

當我們在Vue.js專案中引用圖片時，關於圖片路徑有以下幾種情形：

使用一：

在data裡面定義好圖片路徑：

 /*错误写法*/    imgUrl:'../assets/logo.png'

在template模板裡面：

/*错误写法*/   <img  src="/static/imghwm/default1.png"  data-src="{{imgUrl}}"  class="lazy"   alt="vue.js圖片資源路徑不正確怎麼辦" >

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

<img  src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : alt="vue.js圖片資源路徑不正確怎麼辦" >
//或者 
<img  src="/static/imghwm/default1.png"  data-src="../assets/logo.png"  class="lazy"   alt="vue.js圖片資源路徑不正確怎麼辦" >

這種方式是依照正常HTML語法參考路徑，放在模板裡可以被webpack打包出來。

使用二：

當我們需要在js程式碼裡面寫圖片路徑的時候，如果我們在data裡面寫，webpack只會把它當做字串處理而找不到圖片地址，

錯誤寫法

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

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

<img  src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : / alt="vue.js圖片資源路徑不正確怎麼辦" >
import avatar from &#39;@/assets/logo.png&#39;

在data裡面定義：avatar: avatar

使用三：

我們也可以把圖片放在外層的static資料夾裡面，然後在data裡面定義：

imgUrl ： '../../static/logo.png'
<img  src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : / alt="vue.js圖片資源路徑不正確怎麼辦" >

以上是vue.js圖片資源路徑不正確怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！