Vue.js中的圖片引用路徑問題

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

 

使用一：

    在data里面定義好圖片路徑： /*錯誤寫法*/    imgUrl:'../assets/logo.png'

    在template模板里面：/*錯誤寫法*/   <img src="{{imgUrl}}">

 

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

                 <img :src="imgUrl">或者 <img src="../assets/logo.png">

   這種方式是按照正常HTML語法引用路徑，放在模板里可以被webpack打包出來。
 

 

使用二：

   當我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫，webpack只會把它當做字符串處理從而找不到圖片地址，
 
   /*錯誤寫法*  /imgUrl:'../assets/logo.png'

 

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

<img :src="imgUrl" />

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

  在data里面定義：avatar: avatar

 

使用三：

    我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：

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

<img :src="imgUrl" />

 

參考鏈接： https://blog.csdn.net/Letasian/article/details/76219889