Как создать и добавить изображение с помощью Javascript/jQuery?

Question

Я использую следующий код, чтобы создать элемент изображения, загрузить его, а затем добавить в статью при загрузке.

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

Оповещение стреляя нормально, но изображение не появляется, и когда я проверить элемент он был добавлен без закрытия слэш

<img src='image.png' > 

Почему браузер удаления вперед слэш и как его остановить?

UPDATE: Спасибо всем, кто отметил, что это не слэш, что проблема (школьный день каждого дня), так что это может быть тогда? Вот живой пример http://chris-armstrong.com/inspiration/?username=behoff

UPDATE 2: Ok, так что кажется, что я дебил для не испытывая это с другими изображениями, так как этот вопрос, кажется, с тестовым изображением я использовал (http://img.ffffound.com/static-data/assets/6/dc01f803819405bfe160459021cfe6cc57766f9b_m.jpg). Странно, потому что он загружается, когда вы нажимаете на URL-адрес ... но в любом случае, спасибо всем вашим помощникам, я узнал кое-что!

Answer 1

На основании предоставленной информации, мы знаем следующее:

• Изображение успешно добавлена.

• Изображение успешно загружено (в противном случае вы не получили бы alert()).

Либо у вас есть совершенно прозрачное изображение (не вероятно, конечно), или я бы поспорить, что ваш CSS как-то предотвратить его дисплей.

Вот пример использования CSS, который вы закомментировали в своей демонстрации.

http://jsfiddle.net/JxhaR/(Нет видимого изображения)

В частности, culpret кажется:

display: -webkit-box; 

Когда я вывожу, что изображение отображается.

http://jsfiddle.net/JxhaR/1/(изображение видно.)

Answer 2

Попробуйте это:

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

Answer 3

При осмотре элемента, вы не видите его так, что он был добавлен. Независимо от того, добавляются ли элементы как HTML-код или как элементы (как в этом случае), когда вы проверяете код, который вы ищете, код, созданный из этого элемента, вы не смотрите на код, который использовался для добавления элемента.

Когда вы используете $('<img />'), на самом деле это делает document.createElement('img'), поэтому нет HTML-кода, где конечная косая черта может или не может присутствовать. Элемент создается как объект DOM, он не создан из HTML-кода.

Таким образом, причина, по которой изображение не появляется, заключается не в том, что в теге отсутствует конечная косая черта.

Вероятная причина заключается в том, что изображение на самом деле не существует, где браузер ищет его, то есть либо файл отсутствует, либо URL-адрес неверен.