透明PNG无法显示但可下载

Question

我目前正在尝试使用 react-three-fiber 显示 PNG，但是当我设置具有透明背景的纹理时，它不会显示。
我尝试了很多东西，但注意到如果我将图像的 base64 加载到 img html 元素中，它也不会显示，否则，如果我将它作为 a 元素的 href ，我可以毫无问题地下载它。

这是一个实时示例，您可以在其中下载文件但不能将其加载到 img 中：
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
您可以在单独的选项卡中打开示例，因为代码和框会阻止从缩小的窗口下载​​文件。

如果有人遇到过这种情况，也许 base64 中的某些东西是错误的。

Answer 1

在 Safari 中测试同样的演示，它可以正常工作。在 Firefox 和 Chrome 中它没有。数据 URI 最适合用于小图像——它们会为其存储的数据增加约 30% 的大小损失，并且需要大量的额外处理才能显示它们。出于这个原因，包括 Chrome 在内的浏览器对支持的数据 URI 长度施加了限制，有关这些限制的详细信息，请参阅https://stackoverflow.com/a/41755526/1314762。