如何从 thymeleaf javascript 内联访问静态资源答案

【问题标题】：How to access static resources from thymeleaf javascript inline如何从 thymeleaf javascript 内联访问静态资源
【发布时间】：2021-06-07 15:17:05
【问题描述】：

我有一个 Spring Boot 项目，我需要从 javascript 代码访问位于我的 static/images 目录中的 .png 图像文件。我正在使用百里香叶。我正在使用这样的 html 文件中的th:inline="javascript"：

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ...
       src: "<location of the image file>"
    ...
    /*]]>*/
    </script>

png 文件位于src/main/resources/static/images 目录中，而javascript 程序位于src/main/resources/templates 目录中的html 文件中。我知道我可以使用绝对路径来使用它，但是当它投入生产时它会不一样，所以我必须再次更改它。 Thymeleaf 有 th:src 从基于上下文的路径加载静态文件，但它只能从 html 标签工作，javascript 有什么类似的吗？

【问题讨论】：

标签： javascript java spring spring-boot thymeleaf

【解决方案1】：

您可以在内联表达式中使用与常规 Thymeleaf 表达式相同的标准 URL 语法。

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
let src = /*[[@{/path/to/image.png}]]*/ null;
/*]]>*/
</script>

【讨论】：