Динамическое отображение изображений с помощью jquery и thymeleaf

Question

Я пытаюсь отобразить изображение динамически с помощью функции jquery append с тимилифом в качестве движка просмотра при весенней загрузке.

Вот способ, которым я пытался добавить изображение в div ('.show-image'):

success: function (data) {
    var image_url = "images.png";
    var images_div = "<img th:src=\"@{/image/"+image_url+"}\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}

Тем не менее, он показывает только пустые изображения (без ошибки 404)

Я пробовал с другим случайным онлайн-изображением и работает:

success: function (data) {
    var images_div = "<img src=\"https://onlinejpgtools.com/someimage/random-grid.jpg\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}

Когда я статически отображаю изображение, оно также работает (я думаю, что нет проблем с путями):

<div class="show-image">
    <img th:src="@{/image/images.png}"  height="360px" width="400px">
</div>

Есть предложения?

Answer 1

Оказывается, что thymeleaf - это серверная технология, которая не будет отображать новые изображения.

Я думаю, что мой дизайн был неправильным, и мне просто нужно визуализировать изображение без использования тимилиста, как это:

success: function (data) {
    var image_url = "images.png";
    var images_div = "<img src=\""+image_url+ "\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}