为什么第一种方法有效，而第二种方法无效？

Question

第一种方法：

const getWeatherIcon = (iconParameter) => {
const icon = `https://openweathermap.org/img/wn/${iconParameter}@2x.png`
return <img src={icon} alt={iconParameter} />
}

---

<div className="weathericon">
{getWeatherIcon(weather.weather[0].icon)} //Ex: weather.weather[0].icon=50n
</div>

第二种方法：

const getWeatherIcon = (iconParameter) => {
const icon = `assets/weather/${iconParameter}.svg`
return <img src={icon} alt={iconParameter} />
}

---

<div className="weathericon">
{getWeatherIcon(weather.weather[0].main)} //Ex: weather.weather[0].main=Haze
</div>

这是我的项目目录

src
│   App.js
│   index.css
│   index.js   
│
└───assets
└───weather
|  |    Haze.svg 
│  |    Clear.svg
│  |    Rain.svg
|  
└───bg
|   file111.png
|   file112.png

忽略以下

看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息

Answer 1

您的文件路径不正确，请尝试使用/资产/天气以提供正确的路径

Answer 2

成功了

const getWeatherIcon = (iconParameter) => {
const icon = `${iconParameter}.svg`
return < img src={icon} alt={iconParameter} width='100px' />
}

---

<div className="weathericon">
{getWeatherIcon(weather.weather[0].main)}//Haze, Clear etc.
</div>

---

文件系统：

src
│   App.js
│   index.css
│   index.js   
│
└───assets
│   └───bg
│   |   file111.png
│   |   file112.png
│
│        
public
│   Clear.svg
│   Clouds.svg
│   Rain.svg
│   Haze.svg