I haven’t done a repro yet but all my img loads are throwing Content Security Policy: The page’s settings blocked the loading of a resource at blob:(redacted localhost url here) (“img-src”).
I only have @babylonjs/core and @babylonjs/materials and the errors crashed my ffox browser in 5.21. browser stack trace shows the error thrown by loadFile from
When I rollback to 5.20, every works fine. May I know if there was a breaking change wrt to loading texture files ?
Yep, on it. The change introduced in this version was intended to add consistency with the other file loading methods (previously we were only setting the url to the src prop of an img element). Maybe there is some CSP configuration on your project server that is blocking the loads: Content Security Policy (CSP) - HTTP | MDN?
The question remains still: why does it work in 5.20 ?
Hmmm it would be good to see the server’s CSP configuration to see how it’s treating img-src 
Aaaah I think it might be something similar to this? html - Refused to load the image ‘blob:…’ because it violates the following Content Security Policy - Stack Overflow and due to the fact we’re setting the img.src to a blob now instead of a “regular” url
Hey all, thanks for the amazingly fast response as usual. My csp config for img-src is imgSrc:["'self'"]. I’m not 100% sure but I think there might be two things here. When the errors appear on the ffox browser, it gets thrown like a few thousand calls and browser becomes unresponsive. I had to force the process to end via task manager. So the code prolly needs to fail gracefully, perhaps a try-catch would work.
I just did a fast chk with imgSrc:["'self'", "blob:"] on 5.21 and it works in ffox! So, I updated to 5.26 and everything seems to be fine now. So if loading via blob is the de facto going forward, I guess this now falls into documentation ?
Yeah, me and @sebavan were discussing this, as we were wondering if the CSP erroring like that was something new in browsers or was exclusively because of the code change here… it’s weird that your code throws so many errors, are you loading a lot of images/textures? Also, did you notice if this happened just when loading single images/textures, or also when loading GLBs (as they can also contain blobs)?
I took a quick count, its about 20~30 textures per page load. I do have a spritesheet where its fairly packed with ui icons. Nowhere near the few thousand the browser throws. Since it only took a minute, I switched off blob: in my csp and tested against 5.26.1, below are the console ss for chrome and ffox.
I had to abort early or lose this session, but the error counter didn’t seem to stop.
I don’t have glbs, using traditional .babylon for meshes. All my textures are .avifs.
Oh, I’m able to reproduce this with a spritesheet, thanks for the info!
Thanks for the hard work! Marking this thread as resolved, since blob: is the fix for me. Cheers ! 
By the way, we also added a guard on the code so that it doesn’t keep trying to load the fallback textures (the checkerboard) when CSP fails, since that’s what was causing that absurd amount of errors: Handle CSP violation errors when loading images. by carolhmj · Pull Request #13060 · BabylonJS/Babylon.js (github.com) 
Aha! So that’s what crashed my browser, awesome and thanks for the fix! Sorry for being the oddball that uses csp, tho.
Nah, you’re the correct person who uses security policies to make a secure application! Thanks for bringing this to our attention, really
