require 引入动态图片

Question

<img class="headimg" :src="require('../../uploads/default.jpg')">

以上代码没有问题，但是改成如下写法就出问题了

<img class="headimg" :src="require(imgurl2)">

data () {
    return {
      imgurl2: '../../uploads/default.jpg'
    }
},

结果报错Error: Cannot find module "."，求解，感谢！
补充：项目是用vue-cli搭建的，图片地址是需要从接口获取并拼接的

Answer 1

data() {

return {
    imgUrl: require('../a.png');
}

}

调用：
<img :src="imgUrl" />

Answer 2

我记得 require 是不接受变量的。

个人理解是因为它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊。

Answer 3

<img :src="require(`../imgs/info_${item.id}.png`)" alt="" width="41px">