在尝试使用Thymeleaf(Java,Spring Boot)显示编码图像时出现异常。

huangapple go评论57阅读模式
英文:

Getting exceptions while trying to display encoded images with Thymeleaf (Java, Spring Boot)

问题

在用户页面的HTML文件中,您可以尝试以下方式解码图像:

<img th:src="'data:image/jpeg;base64,' + ${encodedImage}" alt="Profile Picture">

这应该解决您遇到的异常问题。

英文:

So, i have a form that allows user to upload an image, which will be encoded with IOUtils.toByteArray and persisted to a database as a bytea. In a controller method i get this byte array and encode it to string:

@GetMapping(&quot;/{user_id}&quot;)
public String view(@PathVariable(&quot;user_id&quot;) Long user_id, Model model) {
    User user = userService.getById(user_id);
    model.addAttribute(&quot;user&quot;, user);
    byte[] profilePictureBytes = user.getProfilePicture();

    if (profilePictureBytes != null) {
        String encodedImage = Base64.getEncoder().encodeToString(profilePictureBytes);
        model.addAttribute(&quot;encodedImage&quot;, encodedImage);
    }
    return &quot;user-page&quot;;
}

On a user-page html file i try to decode it like this:

&lt;img th:src=&quot;*{&#39;data:image/jpeg;base64,&#39;+ ${encodedImage}}&quot; alt=&quot;Profile Picture&quot;&gt;

but it keeps throwing the same 2 exceptions:

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: &quot;&#39;data:image/jpeg;base64,&#39;+ ${encodedImage}&quot; (template: &quot;user-page&quot; - line 27, col 6

org.springframework.expression.spel.SpelParseException: EL1041E: After parsing a valid expression, there is still more data in the expression: &#39;lcurly({)&#39;

While debugging, the "encodedImage" variable prints out a correct string, so the problem must be within my Thymeleaf syntax.

Would be really grateful if someone could give me a hand with this one.

答案1

得分: 1

你不能像你现在这样嵌套表达式 -- *{ ... ${ ... } ... } 不是有效的Thymeleaf语法。请查看Thymeleaf文档中关于追加文本的部分。在大多数情况下,我认为直接的替代方式更具表现力。

<img th:src="|data:image/jpeg;base64,${encodedImage}|" alt="Profile Picture">

或者如果你更喜欢常规的字符串连接方式。

<img th:src="'data:image/jpeg;base64,'+ ${encodedImage}" alt="Profile Picture">

或者

<img th:src="${'data:image/jpeg;base64,'+ encodedImage}" alt="Profile Picture">
英文:

You can't nest expressions like you are doing -- *{ ... ${ ... } ... } is not valid Thymeleaf syntax. See the Thymeleaf documentation on appending texts. In most cases, literal substitutions I think are most expressive.

&lt;img th:src=&quot;|data:image/jpeg;base64,${encodedImage}|&quot; alt=&quot;Profile Picture&quot;&gt;

Or if you prefer regular String concatenation.

&lt;img th:src=&quot;&#39;data:image/jpeg;base64,&#39;+ ${encodedImage}&quot; alt=&quot;Profile Picture&quot;&gt;

or

&lt;img th:src=&quot;${&#39;data:image/jpeg;base64,&#39;+ encodedImage}&quot; alt=&quot;Profile Picture&quot;&gt;

huangapple
  • 本文由 发表于 2023年5月7日 03:01:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76190618.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定