[SOLVED] How to change html image with local project image file

Help & Support
,
1

I want to change a html image at runtime to some image that is an asset within my project. How do I do that?

I would have thought something like this, but it has no effect at all.
this.image_ball_1.style.backgroundImage=this.app.assets.find('icon-144.png');

I also tried:

this.image_ball_1.style.backgroundImage="url('assets://Images/product2.png')";

…but nothing.:frowning:

Thanks

2

Hi @Grimmy,

Try doing this:

const assetUrl = this.app.assets.find('icon-144.png').getFileUrl();
this.image_ball_1.style.backgroundImage= `url('${assetUrl}')`;

Just note when running from editor in the launch window, you may have to append the current domain to the url. If it doesn’t work out of the box, try some console logs on the url to see if it’s correct or not.

3

Thanks, but I just get the following error on the first line:

TypeError: Cannot read properties of null (reading ‘getFileUrl’)

4

Then your asset name most likely is wrong.

1 Like
5

It’s not wrong, but the file was set to be ‘excluded’ from the build.

Doh!

Thanks so much for the help!!

1 Like