打开天气 API 图标未显示在反应项目中

Question

我正在制作一个天气应用程序，根据您输入的城市告诉当前温度是多少，我想使用 API 图标，但我似乎无法让它们工作，因为只有一个默认图像图标弹出代替天气图标.

在大多数情况下，其他一切似乎都运行良好。

应用程序.js

import axios from "axios";
import { useState } from "react";


function App() {
  const [data,setData]=useState({})
  const [location,setLocation]=useState('')
  const url= `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=1f35643112b0237f679250d783dd2abf&units=imperial`
  const value = data.weather
  const imgurl = `http://openweathermap.org/img/${value?value[0].icon:null}.png`
 
  const searchLocation=(event)=>{
    if(event.key==='Enter'){
    axios.get(url).then((response)=>{
      setData(response.data)
      console.log(response.data)
    })
    setLocation('')
  }
}
  return (
    <div className="App">

      <div className="search">
      <input
      value={location}
      onChange={event=>setLocation(event.target.value)}
      onKeyPress={searchLocation}
      placeholder='Enter Location'
      type='text'     
      />
      </div>
      <div className="container">
      
      <div className="top">
         <div className="Location">
            <p>{data.name}</p>
          </div>
          <div className="temp">
            {data.main?<h1>{data.main.temp.toFixed()}°F</h1>:null}
          </div>
          <div className="description">
          {data.weather ?<p>{data.weather[0].main}</p>:null}
          </div>
          <div className="Icon">
         
          <img src='imgurl'  width="120" height="100"></img>
          </div>
      </div>
       
       {data.name!=undefined&&
       <div className="bottom">
           <div className="feels">
           {data.main ?<p>{data.main.feels_like.toFixed()}°F</p>:null}
            
            <p>Feels Like</p>
          </div>
          <div className="humidity">
            {data.main ?<p>{data.main.humidity.toFixed()}%</p>:null}
            <p>humidity</p>
          </div>
          <div className="wind">
          {data.wind ?<p>{data.wind.speed.toFixed()} MPH</p>:null}
            <p>Wind Speed</p>
          </div>
       </div>
       }
       </div>
    </div>
  );
}

export default App;

我对 React.js 还很陌生，并且仍然习惯于任何形式的帮助，任何形式的帮助都会非常感激！

Answer 1

你需要改变

<img src='imgurl'  width="120" height="100"></img>

至

<img src={imgurl}  width="120" height="100"></img>

由于 imgurl 是一个 JS 变量，所以需要花括号。