Как добавить / заменить изображения в Div

Question

У меня есть позиции HTML (в левом столбце) со словами, которые я буду использовать, чтобы решить, какое изображение отображать в другом элементе div (центральный столбец).
Вот пример позиции:

<li><a href="" onClick="showPic(this.innerHTML)">pngName</a></li>  

Центральное деление гласит:

<div id="fcenter"></div>

В моем JavaScript я пишу:

function showPic(picName) {
   var img = new Image();
   img.src = '/pics/'+picName+'.png';  // get name 
   var middlePanel = document.getElementById("fcenter");
   img.onload = function() {
      middlePanel.appendChild(img);
   };
}

Он не будет отображаться, хотя у меня есть правильное имя изображения и он указывает на правильный файлисточник.

Answer 1

Почему вы пытаетесь сделать это полностью в Javascript?Это может быть ситуация, в которой вы будете обрабатывать событие click в Javascript, и к изображению должен получить доступ одна или две строки CSS, встроенные в ваш Javascript.Вот пример:

HTML

<div id="fcenter">
  <li><a href="#" onClick="showPic()">pngName</a></li>  
<div>

Javascript

function showPic() {
  var el = document.querySelector("#fcenter");

  el.style.backgroundImage = "url('')";
}

Надеюсь, это поможет вам решить вашу проблему.Если не скажите мне, и я постараюсь решить это с вами.

Answer 2

Удалите img.onload = function() {...}, но оставьте middlePanel.appendChild(img).Когда вы ожидаете загрузки от img до load, включая фактическое добавление в DOM, ваш обработчик событий никогда не произойдет, потому что img никогда не добавляется в DOM.Кроме того, используйте .textContent вместо .innerHTML, если вам нужен только текст, он чище.

Демо

function showPic(picName) {
  var img = new Image();
  img.src = 'http://lorempixel.com/100/100/' + picName;
  var middlePanel = document.getElementById("fcenter");
  middlePanel.appendChild(img);
}

main {
  display: flex;
  justify-content: center;
}

img {
  display: inline-block
}

ul {
  font: 400 32px/2 Consolas;
  width: 30%;
  list-style: none
}

section {
  width: 50%;
}

<main>
  <ul>
    <li><a href="#/" onClick="showPic(this.textContent)">people</a></li>

    <li><a href="#/" onClick="showPic(this.textContent)">animals</a></li>
  </ul>
  <section id="fcenter"></section>
</main>

Answer 3

Функция img.onload никогда не будет работать, потому что изображение еще не было отображено.Для экономии энергии браузер загружает только отображаемые изображения.Таким образом, вы не можете дождаться загрузки изображения, если оно еще не отображено.

Вот обновленная функция ...

function showPic(picName) {
   var img = new Image();
   img.src = '/pics/'+picName+'.png';  // get name 
   var middlePanel = document.getElementById("fcenter");
   middlePanel.appendChild(img);
}

Как только изображение показывается,браузер начнет загружать его.Если хотите, вы можете запустить img.onload после добавления изображения в DOM.