从 Thymeleaf src 标签中的 API 获取图像 URL

Question

我有一个类似的 API：

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

此 API 仅将 CDN URL 作为字符串返回，可以在其中找到该用户的图像。在 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，获取应作为 src 标签 URL 的字符串？这是否也适用于 Javascript 函数，当我这样做时，它将 HTML 附加到 div：

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

Answer 1

百里香不是去这里的路。相反，您应该：

1. 在/getProfilePic/shubham的控制器中，只返回图像内容（使用java检索远程图像并将其传递）。

或

1. 将 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>