I'm currently trying to display PNGs with react-three-fiber but when I set a texture with a transparent background it doesn't show.
I've tried many things but noticed that if I take the base64 of the image and load it into a img html element, it doesn't display either, otherwise, if I put it as an href for an a element, I can download it with no issue.
Here is a live exemple where you can download the file but not load it into an img:
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
You may open the sample in a separated tab as codesandbox is preventing file download from the reduced window.
If anyone ever experienced this, maybe something in the base64 is wrong.
Testing this same demo in Safari, it will work correctly. In Firefox and Chrome it does not. Data URIs are best used for small images — they add a ~30% size penalty to the data they store, and a significant amount of extra processing is required to display them. Browsers including Chrome impose limits on the supported length of Data URIs for this reason, see https://stackoverflow.com/a/41755526/1314762 for details on those limits.