Thymeleaf：将文字与变量组合

Question

我在Thymeleaf中有这段代码：

<tr th:each="image: ${images}" >
    <img th:onmouseover="'javascript:imageName(\'theImageName\' + ${image.id} +'\');'"> 
</tr>

但出现解析错误

Answer 1

我有两个观察结果：

打开标签？

某些Thymeleaf模板模式要求模板格式正确。 在这种情况下，任何未关闭的 img标记都将导致解析错误。

发生这种情况时，java堆栈跟踪将提供信息：

org.xml.sax.SAXParseException: The element type "img" must be terminated by the matching end-tag "</img>".

但您可能在浏览器中看到的错误不是：

Exception parsing document: template="home", line 19 - column 6

我的最低配置Spring Boot应用程序默认使用以下更严格的模式之一（ HTML5 ？ XML ？），因此@Metroids和@ErikMD的答案都给了我一个解析错误，但如果我关闭图像标签，它们都可以工作。

如果您不是这种情况，那么使用java堆栈跟踪更新问题可能会有所帮助。

管子

我认为所有这些撇号和加号使标记难以读取（和写入）。 用管道替换文字可以说更清晰（并且不易出错）：

<img th:onmouseover="|javascript:imageName('ImageName${image.id}');|" />

甚至：

<img th:onmouseover="|imageName('ImageName${image.id}')|" />

如果您不喜欢这种方法，还可以通过在theImageName之后删除反斜杠来解决问题中的代码：

<img th:onmouseover="'javascript:imageName(\'theImageName' + ${image.id} +'\');'" />

Answer 2

你可以尝试以下

<img th:onmouseover="'javascript:imageName(\''+ theImageName\' + ${image.id} +'\');'"> 

Answer 3

我会这样格式化：

<tr th:each="image: ${images}" >
    <img th:onmouseover="${'javascript:imageName(''theImageName' + image.id + ''');'}"> 
</tr>

Answer 4

您可以改用以下代码吗？

<img th:attr="onmouseover=${'javascript:imageName(''theImageName' + image.id + ''');'}">

该答案的灵感来自其他SO答案 ，Thymeleaf文档的相关部分为5.1：设置任何属性的值 。