如何使用 Vue 方法作为图像源？答案

【问题标题】：How to use Vue method as image source?如何使用 Vue 方法作为图像源？
【发布时间】：2019-09-25 05:06:46
【问题描述】：

在 Vue 中，我尝试使用方法的结果作为图像的来源：

HTML：

<img :src="getEnergyIcon(type)">

JS：

data() {
      return {

          energyTypeMap: new Map([
            ['colorless','@/assets/images/energy-icons/20px-Colorless-attack.png'],
            ['darkness','@/assets/images/energy-icons/20px-Darkness-attack.png'],
            ['dragon','@/assets/images/energy-icons/20px-Dragon-attack.png'],
            ['fairy','@/assets/images/energy-icons/20px-Fairy-attack.png'],
            ['fighting','@/assets/images/energy-icons/20px-Fighting-attack.png'],
            ['fire','@/assets/images/energy-icons/20px-Fire-attack.png'],
            ['grass','@/assets/images/energy-icons/20px-Grass-attack.png'],
            ['lightning','@/assets/images/energy-icons/20px-Lightning-attack.png'],
            ['metal','@/assets/images/energy-icons/20px-Metal-attack.png'],
            ['psychic','@/assets/images/energy-icons/20px-Psychic-attack.png'],
            ['water','@/assets/images/energy-icons/20px-Water-attack.png'],
            ])

      }
    },

还有：

methods: {
        getEnergyIcon(type){
            return this.energyTypeMap.get(type.toLowerCase());
        }
    },

该方法返回正确的路径，但图像不使用该路径作为源：

我希望结果与硬编码结果相同，但我想通过使用该方法来实现这一点，因为我将使用给我 11 种类型之一的动态数据，我不能使用硬编码路径。

我一直在谷歌搜索以寻找解决方案，但找不到使用直接方法作为图像来源的解决方案。我该怎么做？

提前致谢。

【问题讨论】：

我不知道使用 @ 是否会正常工作，因为这个别名可能是在 webpack 中设置的，并且在您构建应用程序时它将被编译为真实路径。尝试用户 __dirname + "/assets/images/energy-icons/20px-Colorless-attack.png"
@Guto 检查我的解决方法。

标签： image vue.js methods assets

【解决方案1】：

找到这个话题：

How to reference static assets within vue javascript

上面提到了以下内容：

在 Vue 常规设置中，不提供 /assets。

图像变成 src="..." 字符串，而不是。

并要求我使用：

require();

我是这样做的：

data() {
      return {
          card: {},
          energyTypeMap: new Map([
            ['colorless',require('@/assets/images/energy-icons/20px-Colorless-attack.png')],
            ['darkness',require('@/assets/images/energy-icons/20px-Darkness-attack.png')],
            ['dragon',require('@/assets/images/energy-icons/20px-Dragon-attack.png')],
            ['fairy',require('@/assets/images/energy-icons/20px-Fairy-attack.png')],
            ['fighting',require('@/assets/images/energy-icons/20px-Fighting-attack.png')],
            ['fire',require('@/assets/images/energy-icons/20px-Fire-attack.png')],
            ['grass',require('@/assets/images/energy-icons/20px-Grass-attack.png')],
            ['lightning',require('@/assets/images/energy-icons/20px-Lightning-attack.png')],
            ['metal',require('@/assets/images/energy-icons/20px-Metal-attack.png')],
            ['psychic',require('@/assets/images/energy-icons/20px-Psychic-attack.png')],
            ['water',require('@/assets/images/energy-icons/20px-Water-attack.png')],
            ]) 
      }
    },

它解决了我的问题。

【讨论】：