require 引入动态图片

<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搭建的,图片地址是需要从接口获取并拼接的

阅读 11.9k
3 个回答

data() {

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

}

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

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

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

<img :src="require(`../imgs/info_${item.id}.png`)" alt="" width="41px">
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题