根据来自 API javascript 代码的信息填写 html img 标签 'src' 表格

Question

所以，我正在尝试从 openweatherAPI 添加一个 img 元素，当用户通过输入城市获取当前网络统计信息时，它会显示一个与 JSON 结果中找到的图标相关的图标，（即散云、晴空等的图像）。为了显示 img，我知道我需要将 url 粘贴到 img 标签的“src”部分。 URL 看起来像：

 const png = "http://openweathermap.org/img/wn/" + icon + "@2x.png"

但是，为了使其动态化，img 标签“src”必须根据输入城市中的图像文件进行更改。

我有从 js 文件中的“icon”和“png”变量定义的逻辑。我的问题是，如何根据用户在页面上输入的城市，让 html img 'src' 填充我的“png”变量的结果？

我在下面包含了 html 和 javasript 代码

const button = document.querySelector(".button")
const inputValue = document.querySelector(".inputValue")
const name = document.querySelector(".name")
const desc = document.querySelector(".desc")
const temp = document.querySelector(".temp")
const img = document.querySelector(".image")

button.addEventListener('click', function (){

    fetch('http://api.openweathermap.org/data/2.5/weather?q='+ inputValue.value +'&units=imperial&appid=61dcc0033e94c4172d2bb94bb607fc5d')
.then(response => response.json())
.then(data => {
    const nameValue = data['name']
    const tempValue = data['main']['temp']
    const descValue = data['weather'][0]['description']
    const icon = weatherData.weather[0].icon
    const png = "http://openweathermap.org/img/wn/" + icon + "@2x.png"

    name.innerHTML = nameValue
    temp.innerHTML = tempValue
    desc.innerHTML = descValue
    img.innerHTML = 
})


.catch(err => alert("Wrong City name!"))
})

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>OpenWeatherAPI</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    
</head>
<body>
    <div class="input">
        <input type="text" class="inputValue" placeholder="Enter a city">
        <input type="submit" value="submit" class="button">

    </div>

    <div class="display">
        <h1 class="name"></h1>
        <p class="desc"></p>
        <p class="temp"></p>
        <img class="image" src="">
    </div>

    <script src='main.js'></script>
</body>
</html>

Answer 1

如果我没记错的话，我在你的 Java 脚本中没有看到你更改 <img> src 的任何地方。

编辑

您可以通过简单地获取该元素然后设置它的来源来更改 src，例如 blow:

document.getElementById("myImg").src = png;

这是假设您将 "myImg" 的 ID 添加到 <img> 标签，如下所示：

<img class="image" src="" id="myImg">

编辑 2 我没有意识到你之前已经得到了这个元素，所以你需要做的就是：

img.src = png;

根据来自 API javascript 代码的信息填写 html img 标签 'src' 表格

filling out an html img tags 'src' form based on information derived from API javascript code

javascript

html

json

api

openweathermap