How do I create and append an image with Javascript/jQuery?

Question

I'm using the following code to create an image element, load it, then append it to the article on load.

$('<img />')
  .attr('src', 'image.png') //actually imageData[0].url
  .load(function () {
    $('article').append($(this));
    alert('image added');
  });

The alert is firing off ok, but the image doesn't appear, and when I inspect the element it has been added without the closing slash

<img src='image.png' >

Why is the browser removing the forward slash and how do I stop it?

UPDATE: Thanks to everyone who has pointed out that it's not the slash that's the problem (every day's a school day), so what could it be then? Here's the live example http://chris-armstrong.com/inspiration/?username=behoff

UPDATE 2: Ok so it appears I'm a moron for not testing this with other images, as the issue seems to be with the test image I was using (http://img.ffffound.com/static-data/assets/6/dc01f803819405bfe160459021cfe6cc57766f9b_m.jpg). Strange because it loads when you click on the URL... but anyway, thanks for all your help folks, I learned a few things!

Do you specify the correct path? Also you are not wrapping image.png in quotes. — Sarfraz
– Sarfraz, Commented Feb 19, 2011 at 14:51
The slash might not be required, depending on the document type. Also whatever tool you are using to inspect the document, it does not mean that it displays the DOM exactly as it is written. Does the image exist? You have to pass the value in a string: .attr('src', 'image.png') and maybe you have to add a slash before it: .attr('src', '/image.png'). Check the path. — Felix Kling
– Felix Kling, Commented Feb 19, 2011 at 14:52
I guess article is either an id or a class.. isn't it ?? — user372551
– user372551, Commented Feb 19, 2011 at 14:52

user113716 · Accepted Answer · 2011-02-19 15:31:31Z

3

Based on the information provided, we know the following:

The image is successfully appended.
The image is successfully loaded (otherwise you wouldn't get the alert()).

Either you have an entirely transparent image (not likely of course), or I'd bet that your CSS is somehow preventing its display.

Here's an example using the CSS that you commented out in your demo.

http://jsfiddle.net/JxhaR/ (No visible image)

Specifically, the culpret seems to be:

display: -webkit-box;

When I disable that, the image displays.

http://jsfiddle.net/JxhaR/1/ (Image is visible.)

edited Feb 19, 2011 at 15:31

answered Feb 19, 2011 at 15:25

user113716

323k64 gold badges454 silver badges441 bronze badges

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

1 Comment

Chris Armstrong Over a year ago

Hah, thanks, as unlikely as it seems it turns out the test image (img.ffffound.com/static-data/assets/6/…) I was using seems to be the problem... when I tried with other images in the array they appear just fine. Bizarre though, because the image loads when you go to its url

Guffa · Accepted Answer · 2011-02-19 15:19:02Z

1

When you inspect the element, you don't see it the way that it was added. Regardless if you add elements as HTML code or as elements (as in this case), when you inspect the code you are looking at code that was created from the element, you are not looking at the code that was used to add the element.

When you use $('<img />') it actually does a document.createElement('img'), so there is no HTML code where the ending slash can or can not be present. The element is created as a DOM object, it's not created from HTML code.

So, the reason that the image doesn't appear is not that there appears to be no ending slash in the tag.

The likely reason is that the image actually doesn't exist where the browser is looking for it, i.e. either the file is missing, or the URL is not correct.

answered Feb 19, 2011 at 15:19

Guffa

703k111 gold badges760 silver badges1k bronze badges

4 Comments

user113716 Over a year ago

The load event is firing, so the image must have been successfully loaded.

Chris Armstrong Over a year ago

OK, I'll believe you that it's not the slash :D so what could it be? The life example is here chris-armstrong.com/inspiration/?username=behoff

Guffa Over a year ago

@Chris Armstrong: When I test that in Firefox, IE, Opera and Safari the image shows up just fine.

Felix Kling Over a year ago

@Chris Armstrong: I can see the image perfectly (in Chrome). But it only shows up after I click ok in the alert.

Felix Kling · Accepted Answer · 2011-02-19 15:23:15Z

1

Try this:

$('<img />')
    .attr('src', 'image.png')
    .append('article')
    .load(function(){
        alert('image added');
    });

edited Feb 19, 2011 at 15:23

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Feb 19, 2011 at 15:12

samshull

2,3181 gold badge14 silver badges13 bronze badges

6 Comments

Felix Kling Over a year ago

If any then it should be appendTo.

Chris Armstrong Over a year ago

thanks, but I'm afraid that doesn't seem to append anything to the article

Chris Armstrong Over a year ago

Ah, appendTo acts in the same way as my example, but again the image doesn't appear because the forward slash is removed.

Felix Kling Over a year ago

@Chris Armstrong: You should read the comments. It is not because of the slash. The problem is elsewhere.

samshull Over a year ago

@Chris Armstrong, Felix King is right the missing slash is based on your doctype: HTML 4 and HTML5 do not use closing tags, XHTML does

|

Collectives™ on Stack Overflow

How do I create and append an image with Javascript/jQuery?

3 Answers 3

1 Comment

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related