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

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

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

Центральный div гласит:

<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);
   };
}

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

img.onload = function() {Keep this} удалите остальное
zer00ne 25.10.2018 01:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
83
3

Ответы 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.

Почему вы пытаетесь сделать это полностью на Javascript? Это может быть ситуация, когда вы обрабатываете событие щелчка в 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('')";
}

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

Удалите 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>

Другие вопросы по теме