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`"/>

Answer 2

您好，嘗試以下作為 URL 參數：

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

Answer 3

像這樣

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