Vue.js: объединить переменную в URL изображения

Question

Я новичок в Vue.js и пытаюсь создать образ, путь к файлу src которого содержит переменную.Мне трудно конкатенировать в Vue.js.

У меня есть изображение вроде этого:

<img :src="'https://openweathermap.org/img/w/04d.png'"/>

Я хочу объединить '04d.png'часть так, чтобы это было динамично и показывало любое изображение, возвращающееся из вызова API.Как добавить переменную в URL?

Я пробовал это:

<img :src="'https://openweathermap.org/img/w/+${iconCode}'"/>

Я пробовал кучу различных комбинаций одинарных, двойных, обратных кавычек и т. Д.... и ничего не работает.Как правильно связать переменную со строковым URL в теге изображения в Vue?

Answer 1

Используйте обратные пометки, чтобы сделать строку шаблона JavaScript:

<img :src="`https://openweathermap.org/img/w/${iconCode}.png`"/>

Answer 2

Вроде так

<img :src="'https://openweathermap.org/img/w/'+ ${iconCode}"/>

Answer 3

Здравствуйте, попробуйте следующее в качестве параметра URL:

"'https://openweathermap.org/img/w?paramName=${iconCode}'"