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


234

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


4
Это довольно старый вопрос, но стоит учитывать, что изображение без src по сути бессмысленно, и поэтому в спецификации говорится, что изображение должно иметь src, указывающее на какой-то встроенный ресурс. Если вы думаете о достоверности и / или семантике, вам гораздо лучше обойтись без полного изображения и добавления его после факта, поскольку HTML не предоставляет способ указать изображение-заполнитель, которое будет заполнено данными позже.
BoltClock

1
При использовании плагина jQuery для отложенной загрузки Mika Tuupola он использует разметку '<img class = "lazy" data-original = "img / example.jpg" width = "640" height = "480">', так что в некотором смысле вы нужно указать на источник, но это не обязательно делать с атрибутом src.
iWillGetBetter

Вы можете использовать элемент div вместо него, пожалуйста, посмотрите это => stackoverflow.com/a/5513934/1395101
Амин Гадери,

Ответы:


237

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

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

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

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


16
Этот ответ может заставить ваш брандмауэр предупредить вас о доступе к порту 0, например. Или это может вызвать журнал безопасности сервера. Ответ на вопрос, about:blankвероятно, является лучшим решением.
Флориан Маргэйн

10
Это приводит к тому, что иконка сломанного изображения отображается для меня. Кто-нибудь еще видел это? Я использую последнюю версию Firefox (27).
dmikester1

10
Это также завершается ошибкой w3c validator: Bad value //: 0 для атрибута src элемента img: Неверный хост: пустой хост.
ysrb

Это не работает: у меня есть приложение ASP.NET MVC 4, которое содержит плагин галереи изображений под названием очистка. Плагин создает изображения динамически и помещает //: 0 в src до тех пор, пока изображение фактически не будет выбрано. Это заставляло действие index моего homecontroller вызываться дважды. Так что будьте осторожны.
jpgrassi

2
В Firefox 38 этот подход запускает onerrorобработчик изображения .
Нейт Уиттакер,

221

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


14
Отличная идея! Для меня, однако, это убивает элемент изображения - если кому-то нужны другие аспекты imgэлемента для отображения, например, фона и границы, попробуйте, src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="который взят из прозрачного GIF размером 1px x 1px, который я сделал. Фотошоп прошел через base64-image.de
user56reinstatemonica8

4
Возможно, вы захотите дважды подумать о добавлении своих ресурсов с помощью URI данных: mobify.com/blog/data-uris-are-slow-on-mobile
shawnjan

1
Жизнеспособность этой опции зависит от того, какие браузеры вы должны поддерживать: caniuse.com/datauri
Джефф Клеменс

6
Вот прозрачный 1 пиксель PNG:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=
Keavon

2
URL прозрачного изображения, который работал для меня -data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Викрам Рао

34

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

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

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

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


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


1
Нет ошибки HTML с проверкой валидатора W3C. Нет ненужного запроса. 👍 Кажется, это правильный способ сделать это.
Кай Ноак

Лучший! Еще одна вещь, если вы хотите, чтобы она была проверена в srcset, используйтеsrcset="data:,x"
Lucian

18

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

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


7
+1 Это лучший ответ. Если источник изображения в любом случае устанавливается динамически, весь элемент должен быть добавлен динамически. Если вы не хотите, чтобы он был виден до тех пор, пока не будет установлен src, я не могу придумать какой-либо веской причины, почему этот элемент должен быть там до этого.
Эндрю Энсли

15

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

<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


Это кажется чище, чем позволить сетевому уровню выдать ошибку.
Денис Сегюре

По крайней мере, вы уверены, что тупой брандмауэр не спросит разрешения на вызов порта 0 ...
Денис Сегюре

1
Стоит отметить, что в Chrome (и, возможно, в других браузерах) отображается значок «испорченное изображение»
user56reinstatemonica8

1
Это хуже, чем я думал - даже с доктайпом html5 он не работает в Safari или Chrome. У меня есть тестовая страница, которая изменяет Content-type и Doctype страницы, и до сих пор мой любимый: <img />- тег изображения без атрибута src. Это недопустимо (поэтому нет смысла помещать туда пустой тег alt). Я продолжаю играть с ним и обновлю свой ответ (или зачеркнутое) соответственно.
Uberbrady

2
Я взял вашу тестовую страницу и обновил ее, чтобы она стала более очевидной, если изображения не работают должным образом. Старое пустое изображение включено в качестве примера «Всегда работает», а также краткое описание того, что вы видите: memso.com/Test/BlankImage.html Это привело меня к пониманию того, что действительный пустой файл данных GIF является единственным повторно используемым опция для современных браузеров, кроме старого пустого GIF-изображения (которое все еще требуется для старого IE7 и ниже)
Марк Ормстон,

12

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

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

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

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


1
Есть ли аргументы против такого подхода? Как это через браузеры?
Tremby

18
Я видел, как Firefox и Chrome сделали второй запрос при использовании этого подхода, поэтому я бы не рекомендовал его.
Мариус

5
Firefox, Chrome делают второй запрос, даже JMeter анализирует img src, что приводит к рекурсивной загрузке страницы (до достижения максимальной глубины)
burna

1
В FF вы должны дважды нажать кнопку «Назад» в
браузере,

3
Это совершенно неправильно. Любой, кто случайно прочитал комментарии - НЕ ИСПОЛЬЗУЙТЕ ЭТО
Мастер теней - это ухо для тебя

11

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

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

[ng-src = ''] {видимость: скрыто; } если вы используете директиву ng-src в angularjs
Иван Паредес

1
Обратите внимание, что src должен быть установлен в '', он не должен быть неопределенным.
Винсент Хох-Драй

Если я не ошибаюсь, запрос все равно будет выполнен
Нико

9

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

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

1
Это будет отображаться как черная точка в некоторых браузерах.
tomasz86

IE8 наверняка, и более старые версии Firefox в соответствии с stackoverflow.com/questions/9126105/...
tomasz86

1
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==хотя этот источник работал
Макс Яри

9

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

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

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

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

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

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

2
Не хочешь объяснить отрицательный голос? Обратите внимание, что я не рекомендую использовать этот метод, просто предоставив кейс для обсуждения. И это удовлетворяет требованиям из вопроса правильно проверить и не делать дополнительных запросов.
Tenkod

8

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

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

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


Спасибо за обновление вашего ответа, но я подозреваю, что совместимость еще хуже для этого, чем другое решение data-uri, учитывая, что вы используете svg, который не был совместим до IE9. К счастью, прошло много времени с тех пор, как мне пришлось поддерживать устаревшую версию IE, но она все еще актуальна для некоторых людей.
фанкилаундры

Но не страдает ли это теми же проблемами, что и в этой статье? dev.mobify.com/blog/data-uris-are-slow-on-mobile . Я думаю, что вариант <img src = "about: blank"> с css img [src = "about: blank"] {opacity: 0} является лучшим решением. Или, если этот уровень селектора CSS не поддерживается в старых браузерах, просто присвойте тегу img класс вроде «load-in» или что-то в этом роде. А еще лучше, дайте ему класс, используйте JavaScript для обмена data-src, а затем установите функцию загрузки для изображения, чтобы оно исчезало при загрузке. Вы также можете установить счетчик, который будет отображаться во время загрузки. Выглядит действительно профессионально.
Джордан Картер

@JordanCarter Конечно, если важна детальная производительность. Я бы сказал, visibility: hiddenчто это более подходящая вещь, чем opacity: 0для селекторов атрибутов, которые вы предлагаете.
Mystrdat 20.09.16

6

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

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

Это проверяет, но в Firefox получается испорченное изображение, даже с пустым altатрибутом.
Джеймс Райт

4

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


7
Теперь это грязно!
Mystrdat

@mystrdat: Хотите уточнить, почему это грязно? Принятый ответ, используя «//: 0», все еще давал мне иконку с разбитым изображением и странный бесконечный запрос в Firefox. Однопиксельная альтернатива base64 png, также с большим количеством голосов, доставила мне проблемы при использовании <img> в качестве заполнителя, как с указанием высоты и ширины, так и без них. Это самый чистый способ достижения цели без лишних запросов и прохождения всех проверок и проверок.
Мигель

Все вышеперечисленные решения очень глупы, но я сделаю новый ответ, как только у меня будет больше времени.
Mystrdat

@mystrdat: Я был бы рад узнать, что вы скажете по этому поводу?
фанкилаундри

1
@funkylaundry Я прошу прощения за большие претензии и исчезновения, опубликовал мой ответ сейчас. Я также признаю, что раньше не замечал других решений Data URI, с которыми я согласен, но я считаю, что мое в любом случае превосходит синтаксис.
Mystrdat

4
<img src="invis.gif" />

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

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

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


-1

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

<img id="give_me_src"/>

4
Не очень хорошая идея в соответствии со спецификацией : атрибут src должен присутствовать и содержать действительный URL-адрес ...
Майкл Литвин

1
Может быть, он хорошо работает в Chrome, но он выдаст ошибки в проверке HTML, и это не W3 действительный HTML ...
EhsanT
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.