issue

i have a simple project where in which I isolated an issue I am having with device.queue.copyExternalImageToTexture.

The errors in the console are shown here:

A common solution associated with this question on stackoverflow is to use img.crossOrigin = 'Anonymous' on your HTMLImageElement img. It only makes sense in a setting with some back-end, but just to show what happens:

question

Is there any way to solve this, without creating a server/back-end API to serve the png file? I'm familiar with the fetch+response.blob solution in that case, but I am limiting myself to this bare-bones case just to see if it's possible. The same error occurs if the image div is already appended to the document body.

cheers!

Using images in both WebGL and WebGPU requires them to be served and on the same domain or else permission from the server is required if not the same domain. Loading them from 'file://` is not allowed because that same ability would let any HTML file load your local files and send them to a server.

Setting img.crossOrigin just sends extra data to the server the images are on so that it can decide whether or not to give permission to use the image.

Serving the files locally is trivial. Here's a whole bunch of options

What is a faster alternative to Python's http.server (or SimpleHTTPServer)?

Otherwise you can disable your browser's security but I wouldn't personally recommend that (which flags you need depends on your browser)