如何在html中连接img src

Question

我的目标是创建一个包含许多图像的表格。通过这样做，我将遍历一个包含该图像位置的数组。我的问题是，如何将此字符串转换为动态字符串： <td><img src="http://openweathermap.org/img/w/ + local.weather[0].icon +.png"></td>“local.weather[0].icon”是动态部分。我似乎无法找到一种方法来实现这一点。

Answer 1

使用模板字符串。

here is the example,

var val = 'fortnite'

var x = 'I play ${val}';

console.log(x);     // I play fortnite

val = 'pubg'

console.log(x);     // I play pubg

//so I have made that dynamic using template strings. Use ` key instead for quotes.

[![This is the key][1]][1]

Answer 2

你必须在js中手动完成它。（您无法在页面加载时动态添加 src 属性。为此，您必须在服务器上执行此操作或在窗口加载时通过 js 更改它）尝试下面的代码。

<td><img id="weatherImg"></td>

window.addEventListener('load', () => {
    document.getElementById("weatherImg").src = `http://openweathermap.org/img/w/${local.weather[0].icon}.png`;
});