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

文章轉自：https://www.cnblogs.com/lemoncool/p/11284586.html

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

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

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

上文的弊端有兩個：

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

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

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

1 2 3 4 5 6 7

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

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

 

1 2 3 4 5 6

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