Chrome - Image not loaded when loading from JS

Question

I am trying to simply load an image on page load.

When i use a simple src it works ok:

<img src="url.png" />

But when I try to load it from my JS It does not load:

<img id="loadImage" src="" />

JS:

var _img = document.getElementById('loadImage');
_img.src = 'url.png';

The url is shown as 'not found'.

I cant seem to solve it, Why is that happening.

Are you opening the html document on your local filesystem or through a server? — glenatron, Jun 18 '14 at 08:54
This works for me: http://jsfiddle.net/PJYVz/ Have you checked that you call in javascript correctly? Debugged in browser? Correct URL/URI? What have you tried? — urbz, Jun 18 '14 at 08:54
The url exists, my js is ok, the site is directed to my localhost, wired thing is that its working on IE and fails on chrome — omri, Jun 18 '14 at 08:57
"Questions ... __include__ the desired behavior, a specific problem or error and __the shortest code necessary to reproduce it__ in the question itself." Obviously your problem is not reproduceable with the posted code. — Teemu, Jun 18 '14 at 08:58
@omri what is your script type `text/jscript` or `text/javascript`. If `text/jscript` then it will work only on IE browsers. — Jai, Jun 18 '14 at 09:00
@omri okay! is there any error in browser's console? any js error. — Jai, Jun 18 '14 at 09:03

score 1 · Accepted Answer · answered Jun 18 '14 at 09:07

Why don't you try and save the whole image tag in a variable? This you you are not providing invalid HTML markup like empty src.

Just change your HTML to

<div id="imageholder"></div>

and use this code

$(document).ready(function() {
    var image_1 = $('<img src="img/url.png" />');
    $("#imageholder").append(image_1);
});

Take this fiddle and try :)

http://jsfiddle.net/aBF67/

score 0 · Answer 2 · answered Jun 18 '14 at 08:56

0

Try yo create a new Image object and assign it to the src attribute. Example:

var imgObj = new Image();
imgObj.src = "http://.....jpg";

var _img = document.getElementById('loadImage');
_img.src = imgObj;

I hope it helps.

answered Jun 18 '14 at 08:56

Andrea Falzetti