The images from OpenWeather on my react weather app suddenly stopped displaying on mobile. On mobile, the weekly forecast and currently forecast images show white borders instead of actual images. Surprisingly, the website works perfectly fine on desktop. I am clueless as to why this issue is occurring.
Snippet of code generating the weekly weather:
<div className="weekly">
{
weatherData.data.daily.map((item, index) => {
// console.log(item)
if (index > 0) {
return (
<div className="weekly-item" key={index}>
<span className="item-day">
{moment(moment.unix(item.dt)).local().format('ddd')}
</span>
<span className="item-icon">
<img
src={`http://openweathermap.org/img/wn/${item.weather[0].icon}.png`}
className="forecast-icon"
alt="Weather forecast"
/>
</span>
<br />
<div className="min-max">
<span className="item-max">
{Math.round(item.temp.max)}°
</span>
<span className="item-min">{Math.round(item.temp.min)}°</span>
</div>
</div>
)
}
})
}
</div>
Visit my site: