Primer método:
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>Segundo método:
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>Aquí está mi directorio de proyectos
src │ App.js │ index.css │ index.js │ └───assets └───weather | | Haze.svg │ | Clear.svg │ | Rain.svg | └───bg | file111.png | file112.pngIgnorar seguimiento
Parece que tu publicación es principalmente código; por favor agregue algunos detalles más. Parece que tu publicación es principalmente código; por favor agregue algunos detalles más. Parece que tu publicación es principalmente código; por favor agregue algunos detalles más. Parece que tu publicación es principalmente código; por favor agregue algunos detalles más.
La ruta de su archivo no es correcta, intente usar ./assets/weather para proporcionar la ruta adecuada
¡¡Esto funcionó!!
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>Sistema de archivos:
src │ App.js │ index.css │ index.js │ └───assets │ └───bg │ | file111.png │ | file112.png │ │ public │ Clear.svg │ Clouds.svg │ Rain.svg │ Haze.svg