Image loading from html

Phaser 3
1

Hello,
Is it possible to load image directly in html rather than this.load.image().
I’m trying to load the image using image tag as

<img
    src='https://juego-build-server.s3.amazonaws.com/htmlBuilds/441e18079137840864e79a5bb55bab46/e725566d3502bf238694811e613b23a0.png'
    id='frame' style="display: none;">

and then try

this.load.image('frame', document.getElementById("frame").src);

but it loads the image again rather than using the loaded image.

2

Hi,
You can try this:

this.textures.addImage('frame', document.getElementById('frame'));

Docs: Phaser 3 API Documentation - Class: TextureManager

4

I get this error while playing the game

Screenshot 2022-05-04 175022
Screenshot 2022-05-04 1750221150×253 23.4 KB

Is this due to CORS or problem with code?
In case if I have a proper link will it work?

5

Hi,
I tested the code in one of the phaser examples (Phaser 3 Examples) creating an img element with the url of the arrow png file. The code worked correctly.
In your case, as the image is hosted on an external server, it will have a cross-origin policy that prevents access to images via javascript from outside. My knowledge of CORS is very limited, so I hope another forum member can help you with this.
Good luck!

6

You can try

<img crossorigin
src='https://juego-build-server.s3.amazonaws.com/htmlBuilds/441e18079137840864e79a5bb55bab46/e725566d3502bf238694811e613b23a0.png'
id='frame' style="display: none;">

Beware that if you use addImage() there’s no guarantee that the image is complete (downloaded) by then.

7

I added img.crossOrigin = 'anonymous'; now it’s working.

Thanks for the heads-up.