springboot前端显示后端准备好的图片(base64字符串)

Ranger
  • 47

我的后端已经准备好了图片,已经转换完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字符串正常的显示在网页上。
如图:图片描述

回复
阅读 12.1k
2 个回答

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

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

静态资源文件直接引用不是更好么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏