HTML/CSS 照片库不显示图片

Question

再一次，第一个网站，也是第一次使用 "section" 标签，所以我还在熟悉它们。

我从 http://www.johnnycupcakes.com 复制了照片库横幅的代码。我检查了元素并复制了 HTML & CSS 代码并将它们放在我的中，除了更改图片因为我喜欢布局。但是，我选择的图片（保存在本地）不会显示出来。我的页面上其他地方有以相同格式调用的图片，它们显示正常。

这里是 HTML:

<section id="content" class="clearfix">
            <div class="full-wrap">
                <div class="contain contain-slides">
                    <div class="swiper-container">
                        <div class="swiper-wrapper" style="width: 11056px; height: 820px; transition: 0s; -webkit-transition: 0s; transform: translate3d(-6910px, 0px, 0px); -webkit-transform: translate3d(-6910px, 0px, 0px);">

                            <a class="swiper-slide" style="width: 10382px; height: 820px;" href="/services.html">
                              <img src="/Images/iPhone_5C_fix.jpg"/>
                            </a>

                            <a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
                              <img src="/Images/iPad repair.jpg"/>
                            </a>

                            <a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
                              <img src="/Images/MacBook Repair.jpg"/>
                            </a>
                        </div>

                        <div class="pagination">
                            <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
                            <span class="swiper-pagination-switch"></span>
                            <span class="swiper-pagination-switch"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

CSS:

.content {
float: left;
width: 100%
}

.full-wrap {
width: 100%;
float: left;
position: relative
}

.full-wrap.title {
margin: 10px 0px
}

.events .full-wrap.title {
margin-top: 70px
}

.contain {
max-width: 1240px;
margin: 0 auto;
padding: 0px 20px;
position: relative
}

.contain-slides {
margin-top: 50px
}

.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
cursor: pointer !important
}

.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center
}

.swiper-container[style] {
height: auto !important
}

.swiper-container.product-page {
width: 90%;
float: left;
margin: 0;
color: #fff;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden
}

.swiper-wrapper {
position: relative;
width: 9999999px;
overflow: hidden;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
transition-property: transform, left, top;
transition-duration: 0s;
transform: translate3d(0px, 0, 0);
transition-timing-function: ease;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}

.swiper-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
margin: 0 auto
}

.swiper-wrapper[style] {
height: 500px !important
}

.swiper-slide {
float: left
}

.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px
}

.swiper-slide[style] {
height: auto !important
}

.swiper-slide img {
width: 100%;
height: auto
}

.swiper-slide.product-page {
background: none;
overflow: hidden;
color: #fff
}

.pagination {
margin: 0 auto
}

.swiper-pagination-switch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 10px;
background: #000;
margin: 4px;
border: 2px solid #fff;
cursor: pointer;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}

.swiper-pagination-switch:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4)
}

.swiper-visible-switch {
background: #aaa
}

.swiper-active-switch {
background: #fff;
border: 2px solid #000;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}

我唯一删除的是 5 行原代码是8张，我现在只显示5张。

任何关于为什么我的照片没有显示的帮助？

Answer 1

好的，这是 fiddle：https://jsfiddle.net/DIRTY_SMITH/hvsas2Lj/4/

如您所见，有图片显示，我将从将整个路径添加到图片 src 示例开始

<img src="http://lorempixel.com/400/200/">

这将做两件事，要么有效，要么无效。

如果可以，说明你原来的路径是错误的。

如果它不起作用，...那么希望它会起作用...

<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
     <img src="http://lorempixel.com/400/200/"/>
</a>

P.S.: 删除路径（图像名称）中的所有空格

Answer 2

这应该可以解决问题...让我知道

Here is the JSFiddle Demo

截图：

//HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script>
document.onreadystatechange = function(){
    if(document.readyState == "interactive"){
        slider();
    }
}   
function slider(){
    var slider = document.querySelector("figure");
    var slides = slider.children;
    setInterval(function(){
        slider.appendChild(slides[0]);
    }, 5000)
}   

</script>
</head>
<body>
    <nav>
        <div>
            <div id="logo">LOGO</div>
        </div>
        <div> 
            <a href='http://www.se7enservice.com/' class="here">Home</a>
            <a href="/about.html" >About</a>      
            <a href="/services.html" >Services</a>          
            <a href="/pricing.html" >Pricing</a>    
            <a href="/contact_us.html" >Contact Us</a>      
        </div>
        <div>
        </div>
    </nav>
    <section id="slider">
        <figure>
            <img src="https://myreco.me/images/news/55b089d22992f.jpg">
            <img src="https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg">
            <img src="http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg">
        </figure>
    </section>
    <section id="content">
        <header>
            <h1>Header Section</h1>
            <p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
        </header>
        <section>
            <h1>Section Section</h1>
            <p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
        </section>
    </section>
    <footer></footer>
</body>
</html>

//CSS

body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
}
/* NAV */
nav{
    display: -webkit-flex;
    display: flex;

    top: 0;
    width: 100%;
    min-height: 60px;

    z-index: 999;
    position: fixed;
    background: #1E67CB;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
    width: 50vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content: center;
}
nav>div:nth-of-type(3){
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
nav>div>a{
    display: -webkit-flex;
    display: flex;

    -webkit-align-self: center;
    align-self: center;

    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    margin: 0 .5em;
    padding: 0.6em 1.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
}
nav>div>a:hover{
     background: rgba(255,255,255,0.15);
}
nav>div>a:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
    background: rgba(255, 255, 255, 0.15);  
}
nav>div>a:nth-of-type(2):hover{
    background: rgba(255, 255, 255, 0.37);  
}
/* SLIDER */
#slider{    
    display: -webkit-flex;
    display: flex;
    overflow-x: hidden;
    margin-top: 60px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
figure{ 
    display: -webkit-flex;
    display: flex;
    height: 40vh;
    width: 100%;
    max-height: 40vh;
    transform: translateX(0);
    margin: 0 !important;
    animation: slider 5s ease infinite;
}
@keyframes slider {
    0% { transform: translateX(0);}
    20% { transform: translateX(0);}
    50% { transform: translateX(0);}
    90% { transform: translateX(-100%);}
    100% { transform: translateX(-100%);}
}
figure>img{
    min-width: 100vw;   
}
/* CONTENT */
#content{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    min-height: 200vh; /* DEVELOPMENT PURPOSES */
}
#content>header{
    display: -webkit-flex;
    display: flex;

    margin-top: 30px;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    min-width: 1280px;  
    max-width: 1280px;
}
#content>section{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    min-width: 1280px;  
    max-width: 1280px;
}
h1{
    margin: 0;
    font-size: 2em;
    letter-spacing: -3px;
    line-height: 1.1;   cursor: default;
    color: #333;
    text-align: center;
    font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
}
p{
    text-align: center;
    font-size: 1.5em;
    line-height: 1.6em;
    cursor: default;
    color: #333;
    text-align: center;
    font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* FOOTER */
footer{
    display: -webkit-flex;
    display: flex;

/*  position: absolute; */
    width: 100%;
    min-height: 100px;
    bottom: 0;

    background: #5c5c5c;

    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6); 
}

HTML/CSS 照片库不显示图片

HTML/CSS Photo Gallery not displaying pictures

html

javascript

css

jquery

photo-gallery