Vue中動態（import 、require）顯示img圖片

vue中，經常會遇到顯示圖片的問題，

如果是一個普通組件的話，那么這樣就可以了

<img src="../assets/images/avtor.jpg" width="100%">

上文的弊端有兩個：

首先，是采用絕對路徑引入。如果以后圖片移動了位置，需要修改代碼。

其次，如果說圖片是一個logo圖片，同一頁面內有多處用到。就需要引用多次，同理，修改也要修改多處。

所以，動態引入才是王道啊~如果想寫成動態的呢，可以試試如下辦法：

<img :src="logo">
import logo from '@assets/images/avatar.png';
data() {
    return {
        logo
    }
}

此種辦法必須要在data 里注冊一下，直接用會不顯示。

 

<img :src="logo">
data() {
    return {
        logo:require("@assets/images/avatar.png")
    }
}