Question

我正在使用window.location但是由于某种原因我的图片没有加载到该页面中？我检查了我的文件路径，一切都很好。我的主要index.html文件中的图像工作正常，所以我假设它与我的新文件（window.location）有关。控制台说＆＃34;找不到ERR图像。＆＃34;

我相信我错过了一些东西。我对window.location功能很新，任何人都可以帮忙吗？

JS：

        <script>

 document.onreadystatechange = function () {
          if (document.readyState === "interactive") {
              initApplication();
          }
      }

      var eyeColor = null;
      function selectMenu1(value){
        eyeColor = value;
      }

      var skinTone = null;
      function selectMenu2(value){
        skinTone = value;
      }

      function validate()   {
        if (eyeColor && skinTone){
          alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
          //////////////////////////

          // extra conditions below

          //////////////////////////
          if (eyeColor=="brown" && skinTone=="fair"){
            window.location = "brown/brown_fair.html";
          } else if (eyeColor=="brown" && skinTone=="tan"){
            alert("You should have w/e colour hair...");
          }
        }
        else if (!eyeColor){
          alert("Please pick an eye colour");
        }
        else if (!skinTone){
          alert("Please pick a skin tone");
        }
      }

      function initApplication(){
        //setup dropdown menu selection events
        Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
          const menuCallbackName = menu.attributes.onchange.value;
          const fetchedCallback = window[menuCallbackName] || null;

          if (fetchedCallback){
            Array.from(menu.children).forEach((child)=>{
              const callbackValue = child.attributes.data ? child.attributes.data.value : null;
              if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
            });
          } else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);

        });
      }


    </script>

window.location文件中的HTML

        <div class="jumbotron text-center">
  <h1 class="display-4" style="font-size: 2.5rem">Best Hair Color for: <br> 
  </h1>
  <p class="lead">Brown Eyes & Fair Skin</p>
  <hr class="my-4">

 <img src="img/ash_brown.jpg">
 <img src="img/medium_brown.jpg">
 <img src="img/caramel_mix.jpg">

  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

这是我项目的结构：

Answer 1

您在HTML中使用relative path：

 <img src="img/ash_brown.jpg">
 <img src="img/medium_brown.jpg">
 <img src="img/caramel_mix.jpg">

因此，您的浏览器会查找＆＃39; ash_brown.jpg＆＃39;在当前位置......并且如项目结构所示，这不是图像所在的位置。

如果您相对于网站的根目录更改了图片位置，则应该有效：

 <img src="/img/ash_brown.jpg">
 <img src="/img/medium_brown.jpg">
 <img src="/img/caramel_mix.jpg">

考虑到img文件夹位于您网站的根文件夹中，它应该可以正常工作。

Window.location HTML页面未加载jpg图像

1 个答案: