如何在Thymeleaf中通过API获取图片URL并设置img的src属性

问题1：Thymeleaf模板中正确获取CDN URL作为img的src #

你当前的写法存在核心逻辑误区：浏览器把/getProfilePic/{userName}这个API路径直接当成了图片资源地址发起请求，但这个API返回的是字符串格式的CDN URL，并非图片二进制数据，所以浏览器无法将其解析为图片。

要解决这个问题，需要先在后端层面获取到最终的CDN URL，再传递给Thymeleaf渲染，有两种常用实现方式：

方式1：在控制器中预处理URL #

在处理页面请求的控制器方法里，调用你的<IP>:<Port>/getProfilePic/{userName} API，拿到CDN URL后，将其封装到message对象的新增属性（比如profilePicUrl）中，或者直接放到Model里：

// 示例控制器代码
@GetMapping("/chat")
public String chatPage(Model model) {
    List<Message> messages = messageService.getMessages();
    for (Message msg : messages) {
        // 调用外部API获取CDN URL
        String cdnUrl = restTemplate.getForObject(
            "http://<IP>:<Port>/getProfilePic/{userName}", 
            String.class, 
            msg.getUsername()
        );
        msg.setProfilePicUrl(cdnUrl);
    }
    model.addAttribute("messages", messages);
    return "chat";
}

之后在Thymeleaf中直接使用预处理好的URL：

<img class="chat-message-author-pic" 
     th:src="${message.profilePicUrl}" 
     width="15px" height="15px"/>

方式2：通过Thymeleaf调用后端服务方法 #

如果不想在控制器里循环处理，可以定义一个专门的服务类，封装调用外部API的逻辑：

@Service
public class ProfilePicService {
    @Autowired
    private RestTemplate restTemplate;

    public String getProfilePicUrl(String userName) {
        return restTemplate.getForObject(
            "http://<IP>:<Port>/getProfilePic/{userName}", 
            String.class, 
            userName
        );
    }
}

然后在Thymeleaf中直接调用这个服务方法（确保Thymeleaf能访问到该Bean）：

<img class="chat-message-author-pic" 
     th:src="${@profilePicService.getProfilePicUrl(message.username)}" 
     width="15px" height="15px"/>

问题2：JavaScript追加HTML时的写法可行性 #

你当前的写法<img class="chat-message-author-pic" th:src="@{/getProfilePic/' + username + '}" ...>完全不可行，原因很简单：

• Thymeleaf的表达式（比如th:src、@{...}）是在服务器端渲染阶段解析的，当页面发送到浏览器后，Thymeleaf的处理就已经完成。
• JavaScript是在客户端浏览器执行的，此时th:src标签不会被任何引擎解析，会原封不动地留在HTML里，浏览器根本不认识这个属性，自然无法正确加载图片。

正确的做法是让JavaScript主动调用API获取CDN URL，再动态创建或拼接img元素：

方式1：动态创建img元素 #

function addMessagePic(username) {
    // 调用API获取CDN URL
    fetch(`/getProfilePic/${username}`)
        .then(response => response.text())
        .then(cdnUrl => {
            const img = document.createElement('img');
            img.className = 'chat-message-author-pic';
            img.width = 15;
            img.height = 15;
            img.src = cdnUrl;
            // 追加到目标div
            document.getElementById("chat-container").appendChild(img);
        })
        .catch(err => console.error("获取头像URL失败：", err));
}

方式2：拼接HTML字符串（需先获取URL） #

function addMessagePic(username) {
    fetch(`/getProfilePic/${username}`)
        .then(response => response.text())
        .then(cdnUrl => {
            const imgHtml = `<img class="chat-message-author-pic" src="${cdnUrl}" width="15px" height="15px"/>`;
            // 追加到目标div
            document.getElementById("chat-container").innerHTML += imgHtml;
        })
        .catch(err => console.error("获取头像URL失败：", err));
}

内容的提问来源于stack exchange，提问作者Shubham A.