JSP Struts2项目如何动态设置base64格式图片的img标签src属性

问题根因 #

• 你的写法存在引号嵌套冲突：外层src属性用了双引号，内层<s:property>的value属性也用了双引号，JSP解析时会把第二个双引号识别为src属性的结束，导致取值错误，所以渲染后的src只取到了id值image，而非你需要的base64内容。
• 你自定义的transform属性浏览器不会自动执行对应逻辑：之前div能正常显示是因为有配套JS逻辑在DOM加载完成后，读取transform属性处理了div内容，但img的src只要被赋值，浏览器就会立刻尝试加载资源，JS还没处理就已经加载失败了。

解决方案 #

方案1：服务端直接拼接前缀（最推荐，无兼容/时序问题）

直接用Struts2 OGNL表达式在服务端把data:前缀和base64内容拼接完成，直接赋值给src，不需要前端额外处理：

<!-- 注意属性内嵌套用单引号避免冲突，加escapeHtml="false"防止特殊字符被转义 -->
<img src="data:image/gif;base64,<s:property value='%{#attribute.base64Content}' escapeHtml='false'/>" />

如果你不确定图片格式，后端也返回了格式字段的话可以动态拼接：

<img src="data:%{#attribute.imageType};base64,%{#attribute.base64Content}" />

注意：把上面的base64Content替换为你实际存base64值的变量名，从你贴的div渲染结果看，base64值存在original属性对应的变量里，不是id对应的变量，id对应的值就是image。

方案2：前端JS异步处理

如果必须用前端的transform逻辑处理，可以先把base64存在自定义属性里，等DOM加载完成后再处理赋值给src，避免浏览器提前加载错误资源：

<img class="base64-img" 
     data-base64="<s:property value='%{#attribute.base64Content}' escapeHtml='false'/>"
     data-transform="transformBase64ToImage"
     src="loading-placeholder.png" 
     alt="产品图片" />

配套JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.base64-img').forEach(img => {
    const base64Raw = img.dataset.base64;
    // 直接拼接前缀
    const processedSrc = 'data:image/gif;base64,' + base64Raw;
    // 也可以调用你自定义的transform方法
    // const transformFn = window[img.dataset.transform];
    // const processedSrc = transformFn(base64Raw);
    img.src = processedSrc;
  });
});

内容的提问来源于stack exchange，提问作者saomi