Каков правильный способ включения изображения без src?

У меня есть образ, который я буду динамически заполнять с помощью src позже с помощью javascript, но для удобства я хочу, чтобы тег изображения существовал в pageload, но ничего не отображал. Я знаю, что <img src='' /> недействителен, и что лучший способ сделать это?

Ответ 1

Пока нет допустимого способа опускать источник изображения, есть источники, которые не будут вызывать попытки сервера. Недавно у меня была аналогичная проблема с iframe и была определена //:0 как лучший вариант. Нет, действительно!

Начиная с // (исключая протокол), используется протокол текущей страницы, предотвращая предупреждения "небезопасного содержимого" на HTTPS-страницах. Пропустить имя хоста не нужно, но сокращает его. Наконец, порт :0 гарантирует, что запрос сервера не может быть выполнен (это не допустимый порт, согласно спецификации).

Это единственный URL-адрес, который я нашел, не вызвал никаких запросов сервера или сообщений об ошибках в любом браузере. Обычный выбор - javascript:void(0) - приведет к предупреждению "небезопасного содержимого" в IE7, если он используется на странице, обслуживаемой через HTTPS. Любой другой порт вызвал попытку подключения к серверу даже для недопустимых адресов. (Некоторые браузеры просто сделали бы недействительный запрос и дождались их таймаута.)

Это было протестировано в Chrome, Safari 5, FF 3.6 и IE 6/7/8, но я ожидаю, что он будет работать в любом браузере, так как это должен быть сетевой уровень, который убивает любой запрошенный запрос.

Ответ 2

Другой вариант - вставить пустое изображение. Любое изображение, которое соответствует вашей цели, будет выполнено, но следующий пример кодирует GIF, который составляет всего 26 байт, - из http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

Изменить на основе комментария ниже:

Конечно, вы должны учитывать требования к поддержке браузера. Не поддерживается поддержка IE7 или менее. http://caniuse.com/datauri

Ответ 3

Я рекомендую динамически добавлять элементы, а если использовать jQuery или другую библиотеку JavaScript, это довольно просто:

также посмотрите prepend и append. В противном случае, если у вас есть тег изображения, подобный этому, и вы хотите его проверить, вы можете подумать об использовании фиктивного изображения, например, 1px transparent gif или png.

Ответ 4

~~Я не сделал этого некоторое время, но мне пришлось пройти через это одно и то же.~~

<img src="about:blank" alt="" />

Мой любимый - //:0 означает, что вы попытаетесь сделать HTTP/HTTPS-соединение с исходным сервером на ноль порта (порт tcpmux?) - что, вероятно, безвредно, но я бы предпочел не все равно. Heck, браузер может видеть нулевой порт и даже не отправлять запрос. Но я бы предпочел, чтобы это не было указано таким образом, когда это, вероятно, не то, что вы имеете в виду.

В любом случае рендеринг about:blank на самом деле очень быстрый во всех проверенных мной браузерах. Я просто бросил его в валидатор W3C, и он не жаловался, поэтому он может быть даже прав.

Изменить. Не делайте этого; он не работает на всех браузерах (он покажет значок "сломанного изображения", как указано в комментариях к этому ответу). Используйте нижеприведенное решение <img src='data:.... Или, если вам не нужна достоверность, но вы все же хотите избежать излишних запросов на свой сервер, вы можете сделать <img alt="" /> без атрибута src. Но это НЕВЕРНЫЙ HTML, поэтому тщательно подбирайте.

Страница тестирования, показывающая целую кучу разных методов: http://desk.nu/blank_image.php - используется со всеми видами разных доктринов и типов контента. - как указано в комментариях ниже, используйте новую тестовую страницу Mark Ormston по адресу: http://memso.com/Test/BlankImage.html

Ответ 5

Как написано в комментариях, этот метод неверен.

Я раньше не нашел этого ответа, но согласно W3 Specs действительный пустой тег src был бы привязкой к привязке #.дел >

~~Пример: src="#", src="#empty"~~

~~Страница проверяется успешно и никаких дополнительных запросов не производится.~~

Ответ 6

если вы сохраните атрибут src пустой браузер отправит запрос на текущий URL страницы всегда добавляйте 1 * 1 прозрачный img в атрибуте src, если не хотите URL-адрес

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Ответ 7

Я обнаружил, что просто установка src в пустую строку и добавление правила на ваш CSS для скрытия значка с поврежденным изображением очень просто.

[src=''] {
    visibility: hidden;
}

Ответ 8

Я обнаружил, что используя:

<img src="file://null">

не будет делать запрос и корректно проверяется.

Браузеры просто заблокируют доступ к локальной файловой системе.

Но может быть ошибка, отображаемая в журнале консоли в Chrome, например:

Not allowed to load local resource: file://null/

Ответ 9

Используйте действительно пустой, действительный и очень совместимый SVG, основанный на этой статье:

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

По умолчанию он будет иметь размер 300x150px, как и любой SVG, но вы можете работать с этим в стилях по умолчанию вашего элемента img, что вам может понадобиться в любом случае при практической реализации.

Ответ 10

Построение ответа Бена Бланка, единственный способ, которым я получил это для проверки в валидаторе w3, был следующим:

<img src="/./.:0" alt="">`

Ответ 11

В наши дни ИМХО лучший короткий, здравый и правильный способ для пустого img src выглядит так:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

Во втором примере отображается "Альтернативный текст" (плюс значок сломанного изображения в Chrome и IE).

URI "data:," действителен. Пустой медиа-тип по умолчанию - text/plain. Таким образом, он представляет собой пустой текстовый файл и эквивалентен "data:text/plain,"

OT: Все браузеры понимают простой alt. Вы можете опустить ="", это неявно для каждой спецификации HTML.

Ответ 12

Я лично использую about:blank src и разбираюсь с сломанным изображением, устанавливая непрозрачность элемента img на 0.

Ответ 13

<img src="invis.gif" />

Где invis.gif - прозрачный gif с одним пикселем. Это не будет ломаться в будущих версиях браузера и работает в старых браузерах с 90-х годов.

png тоже должен работать, но в моих тестах gif был 43 байта, а png - 167 байт, так что gif выиграл.

p.s. не забудьте тег alt, валидаторы, подобные им тоже.

Ответ 14

Просто, вот так:

<img id="give_me_src"/>