How I can load a image in one aplication with HTML5 o javascript??

Question

load images in aplication

Answer 1

// Javascript
var img = new Image( );
img.src = "www.example.com/cat.png";

<!-- HTML -->
<img src = "www.example.com/cat.png">

Let's see an example!
https://code.sololearn.com/W91ENpDYEJk5/?ref=app

Answer 2

if u have any doubt about appendchild()
@walid kh.Sharaiyra check it out :) https://www.w3schools.com/jsref/met_node_appendchild.asp

Answer 3

@Walid in this case it was important just because you have to append the image to show it...

You can also append that image in a div or other DOM elements. ;)

Answer 4

I know there's already a best answer marked but just in case you'd like to learn more techniques of doing this, there are several other ways with JavaScript. @Maz gave you a cool way of doing it creating an "image Object" 😊

You can also use the following techniques:

// Create an element, "a Node":
var picture = document.createElement("img");

// And set the source:
picture.src = "my_picture.jpg";

// Or set the source like this:
picture.setAttribute("src", "my_picture.jpg");

And if you'd like to insert the image into a certain div, you can do so by giving it an "id", like this:

// HTML
<div id="parent"></div>

// JavaScript - target the parent element above:
var parentDiv = document.getElementById("parent");

// Insert image into parent div:
parentDiv.appendChild(picture);

Another technique is accessing an existing image in the DOM and changing its source, like this:

// HTML
<div><img id="existing_img" src=""></div>

// JavaScript
document.getElementById("existing_img").src="picture2.png";

I've seen people using this other way:
document.write("<img src='my_picture.jpg'>");

And some others use the canvas tag and an image Object together, which I won't post here because it's a little bit longer ☺. Hope this satisfies your curiosity 😊

Answer 5

what do you mean by load an image? can you give more details?

Answer 6

@Maz why it's important to make
document.body.appendChild ( i );

Answer 7

oh ..you mean like document.div.appendChild( i );

Answer 8

thanks Antony

Answer 9

hello hi .