HTML+CSS ... how to set image src?

Help & Support
1

Hello. I am using the structure from the (for us) well known tut; HTML/CSS UI | Learn PlayCanvas

In the top of the ui.js, the connection to the <div>s are set like this:

    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container'); 
    this.div.classList.add('body');
  • within the structure I should be able to write:

var midWayPhotoURL = this.div.querySelector('.imgNrm');

  • or adjusted:
     // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container'); 
    this.div.classList.add('body');
    this.div.classList.add('img'); // ?? is there another way to add img ??

var midWayPhotoURL = this.img.querySelector('.imgNrm');

None of the methods work for me :-/

{Have off course tried the forum already; where this came closest but without help:
How to Html Images}

2

Here are a couple of pages on adding the image DOM element with JS.

3

hmm … it looks like we are ending in a ‘classic pitfall’ … in this case we still have ‘the little anomoly’ in regards to JavaScript in general versus PlayCanvas:

When I aim to emphasize:



// Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container'); 
    this.div.classList.add('body');

I recognize that I (even) might have to set the img as a div:

 this.div = document.createElement('div'); =>>
    this.img = document.createElement('img');

I presume your 4 examples are more 'pure vanilla JS.
PS in my HTML I write this:

<div class='containerNorm'><img class='imgNrm' src=""></div>

as such an <img> inside a <div>

4

Javascript in general works in PlayCanvas. Always has, always will.

I can take any example in those links and they will work in PlayCanvas with little or no modification

5

@Thomas_Due_Nielsen, I would advice getting a JS course to get a better understanding of how JS and specifically JS DOM works.

this.div.classList.add('container'); 
this.div.classList.add('body');
this.div.classList.add('img');

Here you are adding classes to an element, you aren’t adding actual DOM elements. Check and study the links @yaustar provided to better understand how JS works.

This isn’t related to PlayCanvas or its API.

1 Like
6

Example: https://playcanvas.com/editor/scene/1251630

Copied code from: how to insert image in javascript code Code Example

    // Copy and pasted from https://www.codegrepper.com/code-examples/javascript/how+to+insert+image+in+javascript+code
    var img = document.createElement('img'); 
    img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png'; 
	document.body.appendChild(img); // Fixed the bad code from the example
    
    // Add style to position the element
    img.style.position = 'absolute';
    img.style.top = '0px';
    img.style.left = '0px';
    img.style.zIndex = 1000;
1 Like
7

For this specifically, it would adding a div element, giving it a class, creating a img element, giving it a class and adding the img element to the div.

ie:

this.div = document.createElement('div');
this.div.classList.add('containerNorm'); 
    
document.body.appendChild(this.div);

this.img = document.createElement('img');
this.img.classList.add('imgNrm');
this.img.src = 'someUrl';

this.div.appendChild(this.img);
8

Assuming that you have the HTML already and you just want to get the img element with the class name .imgNrm, the code you’ve posted works in a clean example: https://playcanvas.com/editor/scene/1251687

Ui.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 || '';
    
    // 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);
    
    // Add an image to the image element
    var imgElement = document.querySelector('.imgNrm');
    imgElement.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png";
};

With the HTML

<div class='containerNorm'><img class='imgNrm' src=""></div>
9

ok, my track record will show that I tend to have no problems with (vitually) all the JS I write to regular homepages, and I have had a lot of challenges with finding knowledge sources on DOM alone :-/ … so no wonder I tend to get confused.
{so, my new understanding of JS in PlayCanvas: "It differs from JS in the sense, that JS DOM some times needs to be taken in - [one have to add classes to the element at the top] "}

But hey, lets look forward I presume that this video might help me: JavaScript DOM Crash Course - Part 1 - YouTube

(I have used Traversy Media earlier in other scenarios)

10

No, JS as used in Playcanvas is exactly the same as used in other websites.

Usually it’s lack of programming experience that confuses people. Hence my advice on studying a JS course to help with your understanding.

1 Like
11

Not sure what makes you think this as this same code works almost as is on a typical webpage as shown by this code pen: https://codepen.io/hey-codep3n/pen/zYdroZx

The only difference is that I’m not using text from the PlayCanvas assets for the CSS and HTML.

12

Listen I appreciate both of your ‘large sets’ of experience within both JS and JS DOM.
For now I will check out (namely the video of) JavaScript DOM Crash Course - Part 1 - YouTube

  • before commenting further (this video seem to be very useful*, with its connection and use of the DOM objects visible within the console {console(document.dir) and so on})

*) tangible for me at least - again I must have been ‘unlucky’ not to have found enough sources on DOM.