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的String？这是否也适用于Javascript函数，当我执行此操作时，它会将HTML附加到div：

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

Answer 1

Thymeleaf不是去往这里的方式。相反，你应该：

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

或

将网址放在其他属性中。这样的事情：

<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>

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

1 个答案: