Images load in Chrome but not Safari unless page is refreshed or viewed in mobile or tablet screen size

user_15124267 0
Viewed 671

I have 'built' a website and all images in the site load fine when tested on chrome. When loading pages on safari, images will only load if the page is refreshed. If you try and load a page from a link, no images load.

When viewed on safari with a phone or tablet screen size, images load fine.

I am new to coding and I have no idea why this may be the case?

This is an example of how the images are coded into the HTML.

<div class="fullnotescontent">
  <p>Electrons are negatively charged, meaning they are attracted to the positive charge of a nucleus and repel each other. </p>
  <p1><img src="https://via.placeholder.com/750x219.jpg" width="750" height="219" alt="Electrostatic attraction, how energy changes with attraction of oppositely charged ions"></p1>

image html
2 Answers

It might be very helpful to have some more information:

  • how was the website built? Bare html?
  • please add your sources

It might be an issue with the cache. Have you tried the hard refresh (option, command and r) If that shows the images, you're probably facing an issue with the cache. In this case, you might have to add a tag on each image with a timestamp to make the browser reloading the page.

Modern browsers are caching as much as they can and if an image of the same name is requested, it doesn't mean that is becomes freshly downloaded. You can circumvent it with the following:

<img src="your_image.png?v=%time%" alt="..."/>

where %time% is replaced with the current timestamp on each upload (using a template language, php or whatever you like).

This makes the browser recognizing it to be changed at any time.

It helped me the other day with a similar problem on a weather station using weewx.

user_132604620

You are using a <p1> tag in your HTML. replace it with <p> There is no <p1> tag in HTML

   <p1>
     <img src="images/ASPhysical/atomicstructure/electronorbitals1.png" width="750" height="219" alt="Electrostatic attraction, how energy changes with attraction of oppositely charged ions"/>
</p1>

should be

 <p>
    <img src="images/ASPhysical/atomicstructure/electronorbitals1.png" width="750" height="219" alt="Electrostatic attraction, how energy changes with attraction of oppositely charged ions"/>
</p>
user_41593180
Related