Firefox页面刷新后Base64 JPEG图片消失问题解决咨询

API 探路者

2026-6-16

解决Firefox中刷新后Base64 JPEG图片消失的问题

问题场景

我们的企业级React + TypeScript项目中，会抓取网站图片转成Base64格式存入数据库，前端取出后通过<img>标签展示。遇到一个Firefox特有的问题：

首次打开页面时，JPEG和PNG图片都能正常加载
在地址栏回车刷新或按F5刷新后，JPEG图片消失，PNG仍正常显示
DOM中<div className="imgHolder">和对应的<img>标签都存在，控制台无任何报错或警告
Chrome中多次刷新无异常，Ctrl+S保存页面后本地打开也正常

问题根源

看代码里的<img>标签src拼接逻辑：

<img src={"data:image/jpeg;base64, " + jpgbase64} />

data:image/jpeg;base64,后面多了一个空格，Firefox在页面刷新时对data URI的格式校验比首次加载更严格，这个多余的空格导致浏览器无法正确解码JPEG的Base64数据。而PNG图片不受影响，是因为Firefox对PNG的解析容错性更高。

解决方案

去掉data:image/jpeg;base64,后面的空格，使用标准格式拼接Base64字符串，同时建议统一修正PNG的拼接逻辑，保持格式一致：

const App = (): JSX.Element => {
  const jpgbase64 = "/9j/4AAQSkZJRgABAQAAAQABAA .... nveHWYNjqKqrk5I7zc/wAvhOHaHTwM/wDeA/7BPVLtD+OAIPmZfad";
  const pngbase64 = "iVBORw0KGgoAAAANSU .... lCgQUKJAQIkCASUKBJQoEFCiQECJAgElCgSUKBBQokBAiQIBJQoElCgQUKJAQIkCASUKBJQoEFCiQECJAgElCgSUKBBQokBAiQIBJQoElCgQUKJAQIkCASUKBJQoEFCiQECJAgElCgSUKBBQokBAiQIBJQoElCgQUKJAQIkCASUKBJQoEFCiQECJAgElCgSUKBBQokBAiQIBJQoElCgQUKJAQIkCAaX/AcrFIKL9KpbnAAAAAElFTkSuQmCC";

  return (
    <>
      <span className="fakeHtml">{"<div> with base64 JPEG and PNG <img>s:"}</span>
      <div className="imgHolder">
        <img src={`data:image/jpeg;base64,${jpgbase64}`} />
        <img src={`data:image/png;base64,${pngbase64}`}  />
      </div>
    </>
  );
};

export default App;