Errors in the Console when uploading images to HTML/JS UI

#1

Good afternoon.
I want to ask a question.
I have images loaded for the HTML interface, they are uploaded and displayed.
But the Console writes a bunch of errors on loading these images:

Failed to load resource: the server responded with a status of 404 (Not Found)
GET https://launch.playcanvas.com/%7Bbt1-image%7D 404 (Not Found)  %7Bbt1-image%7D:1 
GET https://launch.playcanvas.com/%7Bbt2-image%7D 404 (Not Found)  %7Bbt2-image%7D:1 
GET https://launch.playcanvas.com/%7Bbt3-image%7D 404 (Not Found)  %7Bbt3-image%7D:1 
OR
Failed to load resource: the server responded with a status of 404 (Not Found)  %7Bbt1-image%7D:1 
Failed to load resource: the server responded with a status of 404 (Not Found)  %7Bbt2-image%7D:1 
Failed to load resource: the server responded with a status of 404 (Not Found)  %7Bbt3-image%7D:1

I have the following code for these pictures:
Html:

<img src="{bt1-image}" alt="Image" title="Image" class="image" id="conf1"/>
<img src="{bt2-image}" alt="Image" title="Image" class="image" id="conf2"/>
<img src="{bt3-image}" alt="Image" title="Image" class="image" id="conf3"/>

JS:

ui3.prototype.initialize = function () {

// create STYLE element
var style = document.createElement('style');

// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';

// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
document.body.appendChild(this.div);

this.div.innerHTML = this.div.innerHTML.replace('{bt1-image}', this.app.assets.find('bt1.jpg').getFileUrl());
this.div.innerHTML = this.div.innerHTML.replace('{bt2-image}', this.app.assets.find('bt2.jpg').getFileUrl()); 
this.div.innerHTML = this.div.innerHTML.replace('{bt3-image}', this.app.assets.find('bt3.jpg').getFileUrl());

Please, tell me, what could be wrong?

#2

Hi @Plastic,

Try printing that to the console to see what is returning and check if that url is valid by opening a new browser tab with it.

Usually when launching from the editor that url might be relative and you might need to append the base playcanvas.com domain name to the url.

Your code seems correct, if the images have been preloaded then most likely that’s the issue.

#3

Yes, after adding ‘playcanvas.com’+ before URL, I got the opportunity to open a picture in a browser.
But the error messages have not gone away.
Moreover, they are also present in the offline build after integration into the site (and there should already be no links to images on Playcanvas.com).
Images are loaded & displayed, but they give errors to the Console.

#4

Do the string substitution before you add the html doms to the page.

#5

What do you mean?
Please tell me how to do this?

#6 
ui3.prototype.initialize = function () {

// create STYLE element
var style = document.createElement('style');

// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';

this.div.innerHTML = this.div.innerHTML.replace('{bt1-image}', this.app.assets.find('bt1.jpg').getFileUrl());
this.div.innerHTML = this.div.innerHTML.replace('{bt2-image}', this.app.assets.find('bt2.jpg').getFileUrl()); 
this.div.innerHTML = this.div.innerHTML.replace('{bt3-image}', this.app.assets.find('bt3.jpg').getFileUrl()); 

// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
document.body.appendChild(this.div);

Note that we now replace the image src from {btx-image} to the actual URLs BEFORE adding the HTML to the div at document.body.appendChild(this.div);

#7

Thanx, but your sample generating other error:
“TypeError: Cannot read property ‘innerHTML’ of undefined”

:worried:

#8

Difficult to test without a project to fork. Try this. Same concept, do the replacement of the strings before adding the div to the page

ui3.prototype.initialize = function () {

// create STYLE element
var style = document.createElement('style');

// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';

// Create the DIV
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';

this.div.innerHTML = this.div.innerHTML.replace('{bt1-image}', this.app.assets.find('bt1.jpg').getFileUrl());
this.div.innerHTML = this.div.innerHTML.replace('{bt2-image}', this.app.assets.find('bt2.jpg').getFileUrl()); 
this.div.innerHTML = this.div.innerHTML.replace('{bt3-image}', this.app.assets.find('bt3.jpg').getFileUrl()); 

// Add to the page
document.body.appendChild(this.div);
#9

No, the same situation:
(images are shown but errors generate).

q1
q1.JPG1711×707 234 KB