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

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

这只是一条埃斯林特法则。它失败是因为vue-cli的eslint-plugin，我猜。尝试创建包含以下内容的.eslintrc文件

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