Base64 JPEG 图像在页面刷新时消失

Question

我们有一个企业 React Typescript 项目，其中一部分是从网站上抓取图像，编码为 Base64，写入数据库，然后显示给最终用户。

这是我们代码的非常简化的示例，只是

App.tsx

：

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; 

jpgbase64

和

pngbase64

都是有效的base64字符串。

奇怪的事情是：当我们在 Firefox 中打开这个简单的示例页面时，最初两个图像都被加载了：

屏幕截图 - 第一个站点加载

但是如果我们通过在地址栏中选择站点地址然后按 Enter 键来刷新页面，JPEG 图像就会消失，但 PNG 仍然存在！

然后按 F5 不会返回图像：

屏幕截图 - 刷新后。

请随时查看如何重现的短视频。

• CodeSandbox演示
• 实时站点：https://jpegpngfirefox.netlify.app/

问题：如何让JPEG图片在页面刷新后不消失？

同时，

<div className="imgHolder">

存在于DOM中，并且里面有两个图像；控制台中没有错误/警告。除了我提到的问题之外，一切似乎都很好。

当我们在 Chrome 中打开这个简单的示例页面时，即使我们多次刷新页面，两个图像都会正确加载。

如果只是通过按 Ctrl + S 从浏览器保存页面，然后从保存的文件中打开，一切似乎都工作正常。

Answer 1

查看您的开发者控制台。出现错误，表明图像被截断。 Firefox 无法正确缓存它。显然其他浏览器可以，但对于较大的文件也可能会失败。

Base64 是一个由四个 6 位字符（A-Z、a-z、0-9）组成的字符串。 Base64 格式的图像始终比二进制图像文件大至少三分之一。您用户的 CPU 需要做额外的工作来解码图像。

您的应用程序能够使用 blob 吗？如果是这样，那么您将可以使用 createObjectURL