如何在Thymeleaf中让JavaScript访问并切换图片

问题说明 #

我在Thymeleaf项目中尝试用JavaScript切换图片时遇到了资源访问问题：

function fromPinkToBlue(){
    document.querySelector('#img').src = '../static/images/x2coin.png'
    document.querySelector('#img').setAttribute('style', 'width: 300px; height: 300px')
}

服务器无法识别x2coin.png，但第一张图片x1coin.png通过th:src="@{/images/x1coin.png}"可以正常访问。我误以为无法注册多个Thymeleaf路径，找不到解决办法，对应的HTML代码如下：

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="../static/css/conflip.css" th:href="@{/css/conflip.css}">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JADEN</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="../static/circle-16.ico" th:href="@{/circle-16.ico}"  type="image/x-icon">
<head>
    <meta charset="utf-8">
    <title>Jaden</title>
</head>
<body>
<a href="javascript:show_hide('block')"><img id="img"  src="../static/images/x1coin.png" th:src="@{/images/x1coin.png}" class="image"  style="width: 300px; height: 300px"></img></a>
<br>
<br><input type="submit" id="flipX" value="Flip!">
</body>
<script type="module" src="../static/js/flipper.js" th:src="@{/js/flipper.js}"></script>
</html>

问题原因 #

• Thymeleaf的@{/path}语法会自动处理应用的上下文路径，生成服务器可识别的绝对资源路径；而你在JS中使用的../static/images/x2coin.png是相对路径，部署后static目录是资源根目录，并非可直接访问的URL路径，因此服务器无法找到图片。
• 不存在“无法注册两个Thymeleaf路径”的限制，只需让JavaScript获取到Thymeleaf生成的正确资源路径即可。

解决方法 #

方案1：通过Thymeleaf内联生成JS变量 #

在HTML中添加内联脚本，用Thymeleaf生成目标图片的正确路径，供JS调用：

<script th:inline="javascript">
    // 预生成正确的图片路径
    const x2CoinUrl = [[@{/images/x2coin.png}]];
</script>
<script type="module" src="../static/js/flipper.js" th:src="@{/js/flipper.js}"></script>

修改JavaScript代码：

function fromPinkToBlue(){
    const img = document.querySelector('#img');
    img.src = x2CoinUrl;
    img.style.width = '300px';
    img.style.height = '300px';
}

方案2：给img标签添加自定义属性存储路径 #

在HTML的img标签中，用Thymeleaf将切换图片的路径存入自定义属性：

<img id="img"  
     src="../static/images/x1coin.png" 
     th:src="@{/images/x1coin.png}" 
     th:data-alt-src="@{/images/x2coin.png}"
     class="image"  
     style="width: 300px; height: 300px">

修改JavaScript代码读取该属性：

function fromPinkToBlue(){
    const img = document.querySelector('#img');
    img.src = img.dataset.altSrc;
    img.style.width = '300px';
    img.style.height = '300px';
}

方案3：直接使用绝对路径（不推荐） #

如果应用部署在根路径下，可直接写绝对路径，但这种方式在应用上下文路径变化时会失效：

function fromPinkToBlue(){
    const img = document.querySelector('#img');
    img.src = '/images/x2coin.png';
    img.style.width = '300px';
    img.style.height = '300px';
}

总结 #

核心是避免手动编写相对路径，利用Thymeleaf的@{}语法生成符合服务器要求的资源路径，无论是通过内联变量还是自定义属性，都能让JavaScript正确访问到切换的图片，不存在路径注册数量的限制。

内容的提问来源于stack exchange，提问作者therepanic