Как правильно добавить изображение без src?

Question

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

Answer 1

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

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

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

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

Answer 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

Answer 3

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

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

также посмотрите на prepend и append.В противном случае, если у вас есть такой тег изображения и вы хотите, чтобы он был проверен, то вы можете рассмотреть возможность использования фиктивного изображения, такого как прозрачный GIF размером 1 пиксель или PNG.

Answer 4

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

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

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

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

Я нашел это, используя:

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

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

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

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

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

Answer 9

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

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

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

Answer 10

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

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

Отображает «Альтернативный текст» (если есть) во всех браузерах (плюс значок разбитого изображения в Chrome и IE).

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

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