Question

正如我上面的标题..

我无法在我的文件夹中加载我的图片，但每当我从http或从我的互联网加载图片时，它都能正常工作！

那一定是我错过的东西吗？

***我的代码只是我整个代码的一部分。也许它会碰撞其他Javascript / html？

我应该针对我的目标设定具体方向吗？怎么做？

所以JS可以检测方向和ext？

   var images = {
  image: [

     {src: '../images/gallery-1.png', alt: 'Project 1'}
    , {src: '../images/gallery-2.png', alt: 'Project 2'}
    , {src: 'https://unsplash.it/400/303random', alt: 'Project 3'}
    , {src: 'https://unsplash.it/400/304?random', alt: 'Project 4'}
    , {src: 'https://unsplash.it/400/305?random', alt: 'Project 5'}
    , {src: 'https://unsplash.it/400/306?random', alt: 'Project 6'}
    , {src: 'https://unsplash.it/400/307?random', alt: 'Project 7'}
    , {src: 'https://unsplash.it/400/308?random', alt: 'Project 8'}
    , {src: 'https://unsplash.it/400/309?random', alt: 'Project 9'}

  ]
};

function onClick(element) {
  document.getElementById("img").src = element.src;
  document.getElementById("modal").style.display = "block";
}

<div class="row">

<section class="w3-content w3-container w3-padding-64">

  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
  <div class="w3-row-padding w3-center" appml-data="images">

    <div class="w3-col m4 w3-padding-16" appml-repeat="image" style="cursor: pointer;">
      <img src="{{src}}" alt="{{alt}}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" style="cursor: pointer;">
    </div>

  </div>
</section>
<!-- End Container (Projects) -->

<!-- Modal for full size images on click-->
<div id="modal" class="w3-modal w3-black" onclick="this.style.display='none'" style="z-index: 9999999;">
  <span class="w3-closebtn w3-hover-red w3-text-white w3-xxxlarge w3-container w3-display-topright">×</span>
  <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
    <img id="img" style="max-width:100%">
  </div>1
</div>


  <script src='https://www.w3schools.com/appml/2.0.3/appml.js'></script>

</div>

无法使用Javascript在本地加载图像

0 个答案: