My images won't display on Safari with website Netlify.app

Question

I'm building a portfolio website and I'm trying to add images to "see my works" section of my website. i have 3 images --> image-1, image-2 and image-3. these works fine at my own computer but when i try to display my site in mobile, images won't display.

see my temporary website

see the "Some examples of pages that I have done" section of page.

Screenshot from my phone.

this is the html for each image:

 <!-- 01 --> <figure class="port-item"> <img src="./images/img-1.jpg" alt="Image - 1"> <!-- Problem here!--> <figcaption class="port-desc"> <p>Project Title</p> <a href="" class="btn btn-accent">See Live</a> </figcaption> </figure>

See images I use on my website

More HTML and CSS :

 img { width: 100%; height: 100%; } .portfolio h2 { margin: 2em; font-size: 2em; padding: 10vh 0; border-bottom: solid 1px rgba(0, 0, 0, 0.2); } .port-item { position: relative; } .port-desc { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .port-desc p{ margin-bottom: .5em; font-size: 1.8em; } @media only screen and (min-width: 600px) { .port-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em,1fr)); } } @media only screen and (min-width: 1000px) { .port-item { overflow: hidden; } .port-desc { transform: translateY(100%); transition: transform .4s ease; } .port-item:hover .port-desc { transform: translateY(0); } }

 <section class="portfolio"> <h2>Some examples of pages that I have done</h2> <div class="port-items"> <!-- Itee -> 01 --> <figure class="port-item"> <img src="images/img-1.jpg" alt="Image - 1"> <figcaption class="port-desc"> <p>Project Title</p> <a href="" class="btn btn-accent">See Live</a> </figcaption> </figure> <!-- Itee -> 02 --> <figure class="port-item"> <img src="images/img-2.jpg" alt="Image - 2"> <figcaption class="port-desc"> <p>Project Title</p> <a href="" class="btn btn-accent">See Live</a> </figcaption> </figure> <!-- Itee -> 03 --> <figure class="port-item"> <img src="images/img-3.jpg" alt="Image - 3"> <figcaption class="port-desc"> <p>Project Title</p> <a href="" class="btn btn-accent">See Live</a> </figcaption> </figure> </div> </section>

Note: my index.html and images folder are in the same folder.

My folders

Answer 1

试试这个<img src="images/img-3.jpg" alt="Image - 3">它会起作用

Answer 2

Your Hero Image shows and the url is ../images/intro.jpg but all your figure images have ./images/intro.jpg

does that make a difference?

Answer 3

Following our discussion in comment, as your images folder is in the same folder with your file, you are supposed to write it without the first / so as follow :

<img src="images/img-3.jpg" alt="Image - 3">

If you must change the path of your image, think about clearing the cache of your browser.

You get more information about the rules to manage path here: https://www.w3schools.com/html/html_filepaths.asp

Your result:

EDIT

After my research it seems that images are not shown on safari because of a bug between netlify.app and Safari, please check this link: https://developer.apple.com/forums/thread/658613

So normaly, it should not be a problem if you would deploy a true website.

Best regards,