Как добавить динамическое c изображение в указанную c ячейку в таблице, используя JQuery?

Question

Ниже приведен код, который я использую для добавления указанных c входных значений, которые пользователь вводит в модальном режиме, в таблицу, используя JQuery, однако я борюсь с вводом изображения в таблицу, пользователь будет выберите нужное изображение, используя форму ввода файла, которая использует идентификатор #insert-image. Это код, который у меня пока не работает:

$("#btnAdd").on('click', function() {
  if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {
    var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, '');
    let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>'
    $('tbody').append(row);
    $('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center");
    $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover")
    $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete").on('click', function() {
      $(this).parent('tr').remove();
    });
  }
});

Так что, в основном, речь идет о следующей строке:

$('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center");

Любая помощь будет высоко ценится.

Answer 1

Все, что мне нужно было сделать, это исправить кавычки. Чтобы добавить переменную imagePrep в tag.

Вот исправленный код:

$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image'>").addClass("text-center");

Answer 2

Вы можете добавить прослушиватели событий для прослушивания событий, которые запускаются после выбора изображения на элементе HTML input.

После выбора изображения вы можете читать его данные и отображать это на стороне клиента:

function readImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (evt) {
            $('td:contains("image")').find('img').attr('src', evt.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Привязка input к вышеуказанной функции изменит атрибут src элемента img, расположенного в td:contains("image").