打开天气API图标未显示在react项目上

Question

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

大部分情况下，其他一切似乎都很好。

App.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变量，因此需要大括号。