'Images won’t load on mobile but will load on Desktop browsers

My react weather app suddenly stopped displaying images from OpenWeather on mobile. The weekly forecast and the currently forecast images display white borders instead of images on mobile. The website works perfectly on desktop. I have zero clue why.

Code that gens 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)}&deg;
                  </span>
                  <span className="item-min">{Math.round(item.temp.min)}&deg;</span>
                </div>
            </div>
          )
        }
      })
    }
  </div>

My site: https://weather-mee.netlify.app/

htmlcssreactjs


Solution 1:[1]

Are you sure? It is working on mobile DevTools.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lee Taylor

Related Questions