无法显示透明PNG但可以下载
Transparent PNG can't be displayed but is downloadable
我目前正在尝试使用 react-three-fiber 显示 PNG，但是当我设置具有透明背景的纹理时它不显示。
我已经尝试了很多东西但注意到如果我将图像的 base64 加载到 img html 元素中，它也不会显示，否则，如果我将它作为 href对于 a 元素，我可以毫无问题地下载它。
这是一个实际示例，您可以在其中下载文件但不能将其加载到 img 中：
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
您可以在单独的选项卡中打开示例，因为 codesandbox 阻止从缩减的 window.
下载文件
如果有人遇到过这种情况，可能是 base64 中的某些地方出了问题。
在 Safari 中测试同一个演示，它将正常工作。在 Firefox 和 Chrome 中没有。数据 URI 最适用于小图像——它们会对其存储的数据增加约 30% 的大小损失，并且需要大量额外处理才能显示它们。出于这个原因，包括 Chrome 在内的浏览器对支持的数据 URI 长度施加了限制，有关这些限制的详细信息，请参阅 。
我目前正在尝试使用 react-three-fiber 显示 PNG，但是当我设置具有透明背景的纹理时它不显示。
我已经尝试了很多东西但注意到如果我将图像的 base64 加载到 img html 元素中，它也不会显示，否则，如果我将它作为 href对于 a 元素，我可以毫无问题地下载它。
这是一个实际示例，您可以在其中下载文件但不能将其加载到 img 中：
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
您可以在单独的选项卡中打开示例，因为 codesandbox 阻止从缩减的 window.
如果有人遇到过这种情况，可能是 base64 中的某些地方出了问题。
在 Safari 中测试同一个演示，它将正常工作。在 Firefox 和 Chrome 中没有。数据 URI 最适用于小图像——它们会对其存储的数据增加约 30% 的大小损失，并且需要大量额外处理才能显示它们。出于这个原因，包括 Chrome 在内的浏览器对支持的数据 URI 长度施加了限制，有关这些限制的详细信息，请参阅 。