Блог

Главная - Вопросы по программированию - Изображения, не отображаемые в Javascript

Изображения, не отображаемые в Javascript

#javascript

#javascript

Вопрос:

я сделал этот код, следуя коду моего лектора. При нажатии на кнопку изображение должно сопровождаться текстом. Кроме того, при наведении курсора мыши на кнопку они меняют цвет (эта часть работает нормально). Текст также отображается. Но изображение этого не делает. В коде лектора это работает нормально. Кто-нибудь может мне помочь? 🙂

 <html>
<head>
  <link rel="stylesheet" href="java.css">
  <script language="JavaScript" type="text/javascript">
    function haha() {
      let i = document.getElementById("img");
      let url = "haha.jpg";
      i.style.backgroundImage = `url(${url})`;
      document.getElementById("facetext").innerHTML = "This is my haha face";
    }

    function happy() {
      let i = document.getElementById("img");
      let url = "happy.png";

      i.style.backgroundImage = `url(${url})`;
      document.getElementById("facetext").innerHTML = "This is my happy face";
    }

    function angry() {
      let i = document.getElementById("img");
      let url = "angry.jpg";

      i.style.backgroundImage = `url(${url})`;
      document.getElementById("facetext").innerHTML = "This is my angry face";
    }

    function changebg(color) {
      color.style.backgroundColor = "blue";
    }

    function defaultbg(color) {
      color.style.backgroundColor = "white";
    }
  </script>
</head>
<body>
  <script></script>
  
  <div class="inner">
    <button onclick="haha()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)">  Happy Face</button> <br><br>
    <button onclick="angry()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)">Angry Face</button><br><br>
    <button onclick="happy()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)"> Haha Face </button><br><br>

    <div id="img"></div>
    <p id="facetext"></p>
  </div>

  <script src="java.js"></script>
</body>
</html>

Комментарии:

1. Где ваши изображения? Как вы запускаете свою веб-страницу? Какой веб-сервер вы используете?

2. Правильные ли пути к изображениям?

3. Ваш JS работает, URL-адрес изображения задан в качестве фона и angry.jpg будет работать нормально, если он находится в том же каталоге, что и HTML-страница. Возможно, вам просто нужно установить a height в CSS для этого #img div (без какого-либо CSS, его высота равна 0px )

4. @blex Это должно быть ответом.

Ответ №1:

Похоже, что ваш код работает нормально, если изображения действительно находятся в том же каталоге, что и HTML-страница.

Однако, если у div #img нет никакого стиля, его высота равна 0px . Возможно, вам просто нужно установить для него высоту:

 #img { height: 200px; }