html - springboot前端显示后端准备好的图片（base64字符串）

问题描述

问 题

我的后端已经准备好了图片，已经转换完base64的字符串了，在后端是String类型的变量。
我想让前端直接显示出来这个图片。

网上搜了一下，看到前端的代码一般是

<img id="image" src='data:img/png;base64,${base64Img}' style="display: none"/>

我照做了，然后打算用后端中的String类型的base64图像来传递给base64Img。如下：

model.addAttribute("base64Img", strBase64Img);

本身是期望前端运行时，页面中的src='data:img/png;base64,${base64Img}可以自动变为src='data:img/png;base64,XXXXXXXXXXXXXXbase64字符串XXXXXXXX‘。
但是没有实现。运行时，前端的源码还是src='data:img/png;base64,${base64Img}，而且浏览器报错：

前端界面是html的，因为我上网查，springboot不推荐使用jsp，而是使用thymeleaf。
我又改了改前端的代码，改成了：

<img id="image" th:src="@{'data:img/png;base64,${base64Img}'}" style="display: none"/>

但是依旧是这样。
还有，我还有一行验证用的代码：

<br th:text="${base64Img}">

这行代码就可以正常运行，可以把图片的base64字符串正常的显示在网页上。
如图：

解决方案

解决方案如下：我就不详细解释了,查查文档应该能明白的
<img th:src="@{'data:img/png;base64,'+${base64Img}}" />

还有简单方案是你把所有的东西写入到base64Img，代码如下
model.addAttribute("base64Img", "data:image/png;base64,iVBORw0...");
<img id="image" th:src="${base64Img}"/>

这篇关于html - springboot前端显示后端准备好的图片（base64字符串）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！