Getting asset image URL attached to HTML

I`ve prepared slot for image asset.

Ui.attributes.add('flowerImage', {type: 'asset', assetType:'texture', title: 'Image Asset'});

and connected the image as an asset in editor

Please tell me how can I get the URL to this file to show it in HTML (I would like to get URL in HTML or in ui.js).

My fork to this question: https://playcanvas.com/editor/project/998182

console.log(this.app.assets.find("flower-image.jpg", "texture")[0].getFileUrl());
console.log(this.app.assets.find("Image Asset", "texture")[0].getFileUrl());
console.log(this.app.assets.find("flowerImage", "texture")[0].getFileUrl());

console.log(pc.app.assets.find("flower-image.jpg", "texture")[0].getFileUrl());
console.log(pc.app.assets.find("Image Asset", "texture")[0].getFileUrl());
console.log(pc.app.assets.find("flowerImage", "texture")[0].getFileUrl());

Something from this should work but all are null. What I`m doing wrong?

Hi @mdesign,

It looks like the issue is that assets.find() does not return an array. It only returns the first asset that matches the requirements you provide. If you modify your script to something like this:

console.log(this.app.assets.find("flower-image.jpg", "texture").getFileUrl());
console.log(this.app.assets.find("Image Asset", "texture").getFileUrl());
console.log(this.app.assets.find("flowerImage", "texture").getFileUrl());

console.log(pc.app.assets.find("flower-image.jpg", "texture").getFileUrl());
console.log(pc.app.assets.find("Image Asset", "texture").getFileUrl());
console.log(pc.app.assets.find("flowerImage", "texture").getFileUrl());

you should get the results you’re looking for.

For more information about the AssetRegistry, consider checking out this part of the Playcanvas API reference:

https://developer.playcanvas.com/api/pc.AssetRegistry.html

I hope this is helpful.

1 Like

https://launch.playcanvas.com/1566385?debug=true

It`s not working.

Maybe should I do something more in the editor?

Hi @mdesign,

Sorry about that. I just looked at all of the lines closely, and the reason that line 23:

console.log(this.app.assets.find("Image Asset", "texture").getFileUrl());

doesn’t work is because there is no asset by the exact name of ‘Image Asset’. When you are using the asset registry, you will want to ensure you are using the filename of the asset exactly as it appears in the editor, including the file extension. Because that name returns null. There is no getFileUrl() function.

I hope this his helpful.

1 Like

You helped me a lot. Many thanks.