Изображение не загружается в HTML при добавлении jQuery

Question

Изображение загружается корректно в HTML, но не при добавлении через jQuery.

Проект настроен через веб-пакет, а изображения загружаются через загрузчик файлов.Код работает правильно, когда напрямую вводится в HTML, однако он не работает, когда я пытаюсь загрузить его через jQuery.

Для HTML:

<img src = {require('../images/icon1.png')} className = 'studentIcon' />

Для jQuery:

$("#students").append(
  $("<div class = 'row'>").append(
    $("<div class = 'col-xs-4'>").append(
      "<img src = {require('../images/icon1.png')} />"
    )
  )
)

В HTML добавленные изображения jQuery отображаются как:

<img src="{require('../images/icon1.png')}">

с ошибкой консоли:

icon1.png ')% 7D: 1 GET http://localhost:8080/%7Brequire('../images/icon1.png')%7D 404 (не найдено)

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

Answer 1

Посоветовал бы следующее.

$(function() {
  var students = $("#students");
  var row = $("<div>", {
    class: "row"
  }).appendTo(students);
  var col = $("<div>", {
    class: "col-xs-4"
  }).appendTo(row);
  $("<img>", {
    src: "../images/icon1.png"
  }).appendTo(col);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="students">
</div>

Этот jQuery создает различные HTML-элементы как jQuery OIbjects, добавляет их по мере необходимости и добавляет их в DOM.Для источника изображения это относительный путь к местоположению на веб-сервере.

Надеюсь, это поможет.

Answer 2

Вам не нужно «вкладывать» многие .append() методы, подобные этому.
Но что вам определенно нужно сделать, это объединить строку (знак +) с вашим шаблоном (который запускается первым),иначе это просто символы, которые являются частью строки как есть.

Вот что вы хотите:

$("#students").append("<div class = 'col-xs-4'><img src = "+{require('../images/icon1.png')}+" /></div>");

И более «визуально / читабельный» способ для того же:

$("#students")
  .append("<div class = 'col-xs-4'>"+
            "<img src = "+{require('../images/icon1.png')}+" />"+
          "</div>");