我的图像不会通过Netlify.app网站显示在Safari上

问题描述

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

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

这是每个图像的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.2);
}



.port-item {
    position: relative;
}
.port-desc {
    position: absolute;
    bottom: 0;
    background-color: rgba(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和images文件夹位于同一文件夹中。

My folders

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html image image netlify web