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}'"/>

我尝试了一堆不同的单引号、双引号、反引号等组合……但没有任何效果。将变量连接到 Vue 中图像标签中的字符串 url 的正确方法是什么？

Answer 1

使用反引号使其成为 JavaScript 模板字符串：

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