Dynamic load image & Custom Load image using javascript

Question

Currently working on Loading image dynamic. If the custom image has the path it has to take the custom image not the default one if there is no custom image path are not available it has to load default image in the given ID.

As I am new to Javascript I am trying my below code.

var customImageurl = "custom_Image/web.png";
var defaultImageurl = "";
    function loadGraphics(){
        document.getElementById("loadImage").src = defaultImageurl;
    }
loadGraphics();
<div id="loadImage"></div>

It was not working kindly help me.

Thanks in advance.

Regards Mahadevan

You need to program your logic using ifs like in your description. — PM 77-1
– PM 77-1, Commented Dec 19, 2014 at 0:46

Vince · Accepted Answer · 2014-12-19 01:06:05Z

3

Your problem is that a div has no src attribute, as in your example you have <div id="loadImage"></div>

Your defaultImageurl is also empty.

The solution is to use an <img/> element:

var customImageurl = "custom_Image/web.png";
var defaultImageurl = "";
function loadGraphics(){
    //v-- will not work! 
    document.getElementById("loadImage").src = defaultImageurl;
    //v-- will work given your example conditions
    document.getElementById("loadImage").src = customImageurl;
}
window.onload = function(){
    loadGraphics();
};
<div id="loadImage-wrap">
    <img id="loadImage" />
</div>

answered Dec 19, 2014 at 1:06

Vince

3812 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3292788 · Accepted Answer · 2014-12-19 00:46:44Z

1

You are trying to use a src attribute on a <div> element.

answered Dec 19, 2014 at 0:46

user3292788

4171 gold badge6 silver badges15 bronze badges

3 Comments

Mahadevan Sivasubramanian Over a year ago

hi if i give innerhtml for the div also the image was not working

Mahadevan Sivasubramanian Over a year ago

yes @user3292788 I am new to javascript i am trying something and I have changed src to innerhtml still it was not working kindly help mer

user3292788 Over a year ago

The only way to associate an image to a <div> is to go through the CSS property background. But the semantic will be different. If you want to insert an image in your <div> you have to create it first with document.createElement or just with the object Image. Take a look at this exemple.

Collectives™ on Stack Overflow

Dynamic load image & Custom Load image using javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related