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

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

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

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

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

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

Другой вариант - вставить пустое изображение. Подойдет любое изображение, которое соответствует вашим целям, но в следующем примере кодируется GIF размером всего 26 байт - с http://probblyprogramming.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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

Я обнаружил, что с помощью:

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

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

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

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

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

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

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

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

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

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

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

<img src="invis.gif" />

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

png тоже должен работать, но в моих тестах gif был 43 байта, а png был 167 байтов, поэтому gif победил.

ps не забывайте тэг alt, валидаторы тоже их любят.

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

<img id="give_me_src"/>