How to add html image

Help & Support
1

Hello!
I want to add an image in my html code but it doesn’t load.What should i do?

Thank you

2

Please link to a simple example project that illustrates what you are trying to do. Otherwise, your question is too broad. For example, we don’t know if you have uploaded an image to your project and you’re trying to reference that in HTML. Or whether you are trying to load some image on a remote server via HTML.

3

I want just to add an image in my html code, like this:
https://playcanvas.com/editor/scene/557645
My image is background.jpg

4

Hello,

I tried the following in a project of mine, and it worked.

Go to your PlayCanvas editor.
Open the developer tools. Go to “Sources” tab.
Find your png file. For me, it was under :
playcanvas.com -> api -> assets -> [asset number] -> file.
Right click on the file and copy link address.
Go to your HTML file in the editor.
Replace in your src attribute the string “background.jpg” by the link that you just copied.

For me, the link was : 
"https://playcanvas.com/api/assets/11802006/file/bubble-sprites.png?t=bb8a22809dfdac67d7f874f189a9158d"

And it should work like this. :grinning:
The link you paste is pretty long though…
There may be a cleaner way of doing it.

EDIT :
I found a way to get a shorter URL.
In your UI script, add an attribute to reference your image.
In the editor, drag and drop the image file in the corresponding slot.
Then, add in your code a console.log of that attribute.
Open the console in the launcher. You will see your asset logged.
Open it, navigate under “_file” and then “url”.

It should be like this : 
/assets/files/Assets/Textures/imageName.png?id=xxxxxxxx

You can use this shorter URL in your HTML code instead of the longer one. You need to add “https://playcanvas.com/api” in front of it.

Code : 
// In script scope
Ui.attributes.add("backgroundImage", {type: 'asset', assetType:'texture'});
// In initialize
console.log(this.backgroundImage);

What you could do also, is use that new path in your JavaScript code :

this.backgroundImage._file.url
5

yruama, thank you very much!It worked!

6

Glad to hear it !

I see (from your updated code) that you can use what is inside the “thumbnail” folder, instead of “files” folder, interesting. :slight_smile:

7

Hello!
I have a question.When the image i want to use is edited( i have removed the background of my photo), i get the image with black background .Is there any way to fix it ?

8

I don’t quite understand, are you asking about transparent images?

9

Yes, i have edited the image rightrow.png and when i’m using the using the url address im my html code, i get the the image with black background.

https://playcanvas.com/editor/scene/557645

10

Looking at the HTML, you are linking to the thumbnail and not the actual image.

It’s generally recommended to use external servers to host images to show in HTML as there are nuances in how PlayCanvas stores and publishes assets in builds.

Otherwise, the alternative is to use placeholder strings in the HTML and CSS source which is replaced at runtime by the actual path to the asset.

e.g: https://playcanvas.com/editor/scene/602751

3 Likes
11

I thik your example helped me very much! Thank you again :slight_smile: !!!

12

Hello (again - old topic), I have seen your codes. Why do I get this err msg

%7Bangle-image%7D:1 GET https://launch.playcanvas.com/{angle-image} 404 (Not Found)

  • with this code?
HtmlHandler.prototype.initialize = function() {

    
    // create DIV element
    this.element = document.createElement('div');
    this.element.classList.add('container');
    this.element.classList.add('textMiddle');
    this.element.classList.add('counterBox');
  //  this.element.classList.add('canvas');
//this.element = document.getElementById('canvas');
this.element.innerHTML = this.html.resource || '';
    
            var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // Replace tags in the html
    this.div.innerHTML = this.div.innerHTML.replace('{angle-image}', this.app.assets.find('angle.svg').getFileUrl());


    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);

    // asset
    this.asset = null;
    this.assetId = 0;

    this.counter = 0;
       var app = this.app; 
    // this.commScr = this.commEntity.script.commScr; 
};
13

And the html:
"

<div class='textMiddle'>
    Click one of the ready-made plans or make your own<br/>
    <br/>
    <br/>
</div>
<div id="element1">Departure:  </div><div id="element2"><div class='departureBox'> br   </div></div>
<br/>
<img class='img' src = "{angle-image}" >
<div class='textAngle'>45</div><div id="element2">°</div>
<br/>
<div id="element1">1st stop:  </div><div id="element2"><div class='1stopBox'> br   </div></div> <br/>
<br/>
<br/>
<div id="element1">2nd stop:  </div><div id="element2"><div class='2stopBox'> br   </div></div> <br/>
<br/>
<br/>
<div id="element1">Destination:  </div><div id="element2"><div class='destinationBox' > br   </div></div> <br/><br/>
<br/>
<div class='button'>Reset journey</div>
<div class='text'>
    Hit the button 'Reset journey' to reset<br/><br/>
  
</div>

"

  • CSS:
.container {
    position: absolute;
    bottom: 20px;
    left: 16px;
    
    background-color: #c2f6f6;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 1, 0, .3);
}

.container > .button {
    float: left;
    display: inline-block;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.container .counter {
    color: #ff0;
    font-size: 24px;
}

.container > .textMiddle {
    color: #000;
    margin-top: 12px;
}

.container > .text {
    color: #000;
    margin-top: 52px;
}

.container > .textAngle {
    color: #000; display:inline-block; 
}

.container > .img{  display:inline-block; margin-left:280px;
    height: 39px;
    width: 60px;
}

#element1 {display:inline-block;margin-right:10px; width:200px;} 
#element2 {display:inline-block; }
14

At a glance, I can’t see anything wrong with the code itself. The error suggests that the replacement of the placeholder text didn’t happen. Was there any other errors prior to this one?

Can you create a small public project that has this error and past a link please?

15

Ok thx. On the other hand: Works again (barely, without corrupting the rest of the DOM execution anymore). Additionally: Will probably work better at uploaded scenario as well (maybe sandbox-related initially).

16

Hey! I spent a bit of time figuring out how to add an html image and wanted to contribute my findings.

@yruama 's advise was excellent and got me closer to my solution. I set the src of the HTML to the image asset file’s URL.However, accessing the image asset’s URL via Asset.file.url led to a broken image. What worked for me is the image asset’s getFileURL() method. (Which is the method @yaustar used in the referenced PlayCanvas example scene.)

While debugging, i noticed that Asset.file.url gave a URL that looked like this: /assets/files/Assets/Textures/imageName.png?id=xxxxxxxx.
But the getFileURL() method gave a URL that looked like this (and this led the HTML image to load successfully): /api/assets/files/Assets/Textures/imageName.png?id=xxxxxxxx.
The difference is that the api directory is included in the URL.