How to Html Images

Hello to all!

I am a bit uncertain how to load images and other assets that are used for html UI.
At the moment i am using a different server to link the images to but i fear for cross domain policies issues (if that is even a thing).

Can you provide an example on a best practice?

You can upload images and other assets in the Editor. Note that by default when you upload images they will be resized to become a power of 2. If you do not want that behavior disable Textures POT in Settings -> Asset Tasks (you will have to do that everytime you reload the Editor as its not saved at the moment).

To get the URL of an asset you can do asset.getFileUrl() in your code. A trick we use sometimes when we make HTML user interfaces is to reference assets in HTML and CSS assets using their tag. Then you can make a script that parses those HTML and CSS assets and replaces those tags with URLs. For example you could have an HTML asset like so:

<div>
  <img src="{my-logo}">
</div>

Then in the script that attaches this HTML asset to the DOM you can first process it to replace {my-logo} with the URL of the asset that has the tag my-logo.

var Ui = pc.createScript('ui');

Ui.attributes.add('html', {type: 'asset', assetType: 'html'});

Ui.prototype.initialize = function () {
  var html = this.html.resource;
  html = this.replaceTagsWithAssets(html);
  this.attachHtmlToDom(html);
}

Does this make sense?

Actually using a pattern like {my-tag} is probably not the best idea because it’s gonna be hard to match especially in CSS but you can use some other pattern like [asset.my-tag] etc.

Hey Vaios.
Thanks so much for your reply!
The plan worked!

1 Like