記錄一個關於Vue中img標簽引入動態圖片的問題

1、直接引用圖片地址可以顯示, 但如果直接使用變量，則會報錯can not find module....

<img src="../../assets/images/message-on.svg">

<img :src="imgUrl">

imgUrl = '../../assets/images/message-on.svg'  // 不可行

imgUrl = require('../../assets/images/message-on.svg')  // 可行

或者

<img :src="require(imgUrl)">

imgUrl = '../../assets/images/message-on.svg'

 

2、當在某種場景下，想要動態替換掉圖片，則會報錯can not find module....

<img :src="require(imgUrl)">

imgUrl = '../../assets/images/message-on.svg' 

imgUrl = imgUrl.replace('on', 'off')  // 報錯

修改成

<img :src="require('../../assets/images/' + imgUrl)">

imgUrl = 'message-on.svg'
imgUrl = imgUrl.replace('on', 'off') // 不報錯