记录一个关于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') // 不报错