Vue.js：将变量连接到图像 URL

Posted 2023-02-22

【中文标题】Vue.js：将变量连接到图像 URL

【英文标题】：Vue.js: Concatenate variable into image URL

【发布时间】：2020-01-23 23:21:13

【问题描述】：

我是 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的正确方法是什么？

【问题讨论】：

我认为你不需要一个“+”号，没有它也可以工作

【参考方案1】：

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

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

【讨论】：

这成功了。只需添加 .png 作为文件扩展名。谢谢。

很高兴这有效。我将“.png”添加到我的答案中，以防其他人将来看到。

【参考方案2】：

像这样

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

【参考方案3】：

您好，请尝试以下作为 URL 参数：

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