我的离线网站与我的离线网站的显示方式不同（图片不会显示）[重复]

Question

我通过 Github 托管我的网站。我不精通 HTML 或 CSS，但网上有大量资源可以帮助我度过难关。问题是我试图为我的网站制作幻灯片。当我单击计算机上的文件时，它会在我的浏览器中离线打开，一切看起来都完全符合我的要求，即显示图片。但是，当我将所有代码上传到 github 并尝试在线访问我的网站时，幻灯片中的图片没有显示。我将链接github和下面的代码。我为幻灯片使用了 W3 学校代码，这在您可以在 github 上看到的代码中很明显。下面还有用于其中一张幻灯片的 html/java。对于可能是糟糕的编码实践、无法在网站上正确发布等问题，我提前致歉。css 并没有真正正确显示，因此请参阅 github。 https://github.com/laservader/prebarbar.github.io

网上的样子：

离线的样子：

在线：

离线：

<!-- Container for the image gallery -->
    <div class="container">
      <script>
      var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
    showSlides(slideIndex = n);
    }

    function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
    }
    $(".slideshow > img:gt(0)").hide();
    </script>
      <!-- Full-width images with number text -->
      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_6523.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_6867.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_7116.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_7139.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_7154.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext"></div>
          <img src="img_7185.jpg" style="width:100%">
      </div>

      <!-- Next and previous buttons -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>


      <!-- Thumbnail images -->
      <div class="row">
        <div class="column">
          <img class="demo cursor" src="img_6523.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
        </div>
        <div class="column">
          <img class="demo cursor" src="img_6867.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
        </div>
        <div class="column">
          <img class="demo cursor" src="img_7116.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
        </div>
        <div class="column">
          <img class="demo cursor" src="img_7139.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
        </div>
        <div class="column">
          <img class="demo cursor" src="img_7154.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
        </div>
        <div class="column">
          <img class="demo cursor" src="img_7185.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
        </div>
      </div>
    </div>
    <script>
      showSlides(slideIndex);
    </script>

Answer 1

通常是 .jpg 文件，但带有 .JPG 扩展名，如果它在线，可能会因此无法显示