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

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

4 голосов
/ 19 февраля 2011

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

$('<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

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

Ответы [ 3 ]

3 голосов
/ 19 февраля 2011

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

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

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

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

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

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

В частности, виновником выглядит: 

display: -webkit-box;

Когда я отключаю это, отображается изображение.

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

1 голос
/ 19 февраля 2011

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

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

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

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

1 голос
/ 19 февраля 2011

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

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