Как использовать метод Vue в качестве источника изображения?

Question

в 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 типов, я не могу использовать жестко закодированные пути.

Я гуглил, чтобы найти решение, но не могу найти решение, которое использует прямой метод в качестве источника для изображения.Как мне это сделать?

Заранее спасибо.

Answer 1

Нашел эту тему:

Как ссылаться на статические активы в 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')],
            ]) 
      }
    },

Это решило мою проблему.