我的图片无法在带有网站的 Safari 上显示 Netlify.app

Question

我正在建立一个投资组合网站，我正在尝试将图像添加到我网站的“查看我的作品”部分。我有 3 张图片 --> image-1、image-2 和 image-3。这些在我自己的电脑上工作正常，但是当我尝试在移动设备上显示我的网站时，图像不会显示。

see my temporary website

请参阅页面的“我完成的一些页面示例”部分。

Screenshot from my phone.

这是每张图片的 html：

<!-- 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

更多 HTML 和 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>

注意：我的index.html和图片文件夹在同一个文件夹中。

My folders

Answer 1

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

Answer 2

显示了您的英雄图片，url 是 ../images/intro.jpg，但您所有的人物图片都有 ./images/intro.jpg

这有什么不同吗？

Answer 3

根据我们在评论中的讨论，由于您的图像文件夹与您的文件位于同一文件夹中，因此您应该在没有第一个 / 的情况下编写它，如下所示：

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

如果必须更改图片路径，请考虑清除浏览器缓存。

您可以在此处获得有关管理路径规则的更多信息：https://www.w3schools.com/html/html_filepaths.asp

你的结果：

编辑

经过我的研究，由于 netlify.app 和 Safari 之间的错误，Safari 似乎无法显示图像，请检查此 link： https://developer.apple.com/forums/thread/658613

所以正常情况下，如果你部署一个真正的网站应该没有问题。

此致，

我的图片无法在带有网站的 Safari 上显示 Netlify.app

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

html

css

image

web

netlify