Search code examples
htmlcssimagewebnetlify

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

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

Solution

  • 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,