1

我正在建立一个投资组合网站，我正在尝试将图像添加到我网站的“查看我的作品”部分。我有 3 张图片 --> image-1、image-2 和 image-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>

查看我在我的网站上使用的图片

更多 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 和 images 文件夹在同一个文件夹中。

我的文件夹

4

3 回答 3

0

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

于 2020-08-31T22:27:59.837 回答
0

你的英雄形象显示，网址是../images/intro.jpg，但你所有的人物形象都有./images/intro.jpg

这有什么区别吗？

于 2020-08-31T22:34:14.647 回答
0

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

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

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

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

你的结果：

编辑

经过我的研究，由于 netlify.app 和 Safari 之间的错误，似乎没有在 safari 上显示图像，请检查此链接： https ://developer.apple.com/forums/thread/658613

所以通常情况下，如果您要部署一个真正的网站，这应该不是问题。

此致，

于 2020-08-31T22:34:42.743 回答