Question

我想根据一些属性值显示资产文件夹中的图片。我创建了一个带有开关的方法。找不到图片。经过一番谷歌搜索后，我意识到这是由webpack引起的，我将使用require。但是我仍然遇到奇怪的错误。

这有效：

<img src="@/assets/happy.png" class="pr-2" align="middle">

动态：

<img :src="this.votedPicture" class="pr-2" align="middle">

votedPicture() {
  switch (this.$store.getters.POLL.my_vote) {
    case 'neutral':
      return require('@/assets/happy.png');
    default:
      return require('@/assets/angry.png');
  }
},

}，

此操作失败，显示为Unexpected require()。

当我将require移至img时：

<img :src="require(this.votedPicture)" class="pr-2" align="middle">

控制台出现错误：

vue.runtime.esm.js:1888 Error: Cannot find module '@/assets/happy.png'
at webpackEmptyContext (organisms sync:2)
at Proxy.render (CompletePoll.vue?4b27:31)
at VueComponent.Vue._render (vue.runtime.esm.js:3548)

那正确的方法是什么？

Answer 1

这只是一个Eslint规则。我猜是因为来自vue-cli的eslint插件而失败了。尝试创建一个包含以下内容的.eslintrc文件

{
  rules: {
    "global-require": 0  
  }
}

动态图片路径-Vue，Webpack，资产-意外需求

1 个答案: