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

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

$('<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/dc01f803819405bfe160459021cfe6cc57766f9/_m> .jpg Странно, потому что он загружается, когда вы нажимаете на URL ... но в любом случае, спасибо всем за помощь, я узнал кое-что!

4 голоса | спросил Chris Armstrong 19 FebruaryEurope/MoscowbSat, 19 Feb 2011 17:48:40 +0300000000pmSat, 19 Feb 2011 17:48:40 +030011 2011, 17:48:40

3 ответа


0

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

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

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

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

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

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

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

display: -webkit-box;

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

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

ответил user113716 19 FebruaryEurope/MoscowbSat, 19 Feb 2011 18:25:18 +0300000000pmSat, 19 Feb 2011 18:25:18 +030011 2011, 18:25:18
0

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

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

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

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

ответил Guffa 19 FebruaryEurope/MoscowbSat, 19 Feb 2011 18:19:02 +0300000000pmSat, 19 Feb 2011 18:19:02 +030011 2011, 18:19:02
0

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

$('<img />')
    .attr('src', 'image.png')
    .append('article')
    .load(function(){
        alert('image added');
    });
ответил samshull 19 FebruaryEurope/MoscowbSat, 19 Feb 2011 18:12:30 +0300000000pmSat, 19 Feb 2011 18:12:30 +030011 2011, 18:12:30

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132