First Method:
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>
Second Method:
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>
Here Is My Project Directory
src
│ App.js
│ index.css
│ index.js
│
└───assets
└───weather
| | Haze.svg
│ | Clear.svg
│ | Rain.svg
|
└───bg
| file111.png
| file112.png
Ignore following
It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details.
You file path is not correct try to use ./assets/weather to give proper path
This Worked!!
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>
File System:
src
│ App.js
│ index.css
│ index.js
│
└───assets
│ └───bg
│ | file111.png
│ | file112.png
│
│
public
│ Clear.svg
│ Clouds.svg
│ Rain.svg
│ Haze.svg