Получить URL-адрес изображения из API в теге Thymeleaf src

Question

У меня есть такой API:

<IP>:<Port>/getProfilePic/{userName}

Этот API просто возвращает URL CDN в виде строки, где можно найти изображение для этого пользователя.В шаблоне Thymeleaf я делаю:

<img class="chat-message-author-pic" 
    th:src="@{'/getProfilePic/' + ${message.getUsername()}}" 
    width="15px" height="15px"/>

Конечно, ответ обрабатывается как содержимое изображения, а не как URL, из которого изображение должно быть загружено.Например, для одного из пользователей тег в браузере выглядит так:

<img class="chat-message-author-pic" width="15px" height="15px" 
    src="/getProfilePic/shubham">

Как я могу использовать шаблонизатор Thymeleaf для вызова API, получить строку, которая должна выступать в качестве URL для тега src?Будет ли это работать в функции Javascript, которая добавляет HTML к div, когда я делаю это:

<img class="chat-message-author-pic" 
    th:src="@{/getProfilePic/' + username + '}" 
    width="15px" height="15px"/>' + ...

Answer 1

Thymeleaf не способ пойти сюда.Вместо этого вы должны:

1. В контроллере для /getProfilePic/shubham просто вернуть содержимое изображения (используя java для получения удаленного изображения и передачи его).

или

Поместите URL в другой атрибут.Примерно так:

<img class="chat-message-author-pic" width="15px" height="15px" th:data-location="@{/getProfilePic/{user}(user=${message.username})}">

Затем используйте JavaScript для заполнения атрибутов src.

<script>
$(function() {
  $('.chat-message-author-pic').each(function (i, e) {
    $.get($(e).data('location'), function(data) {
      $(e).prop('src', data);
    }, 'text');
  });
});
</script>