Html img scr: Атрибут src | htmlbook.ru

html. Как правильно включить изображение без src?

спросил 11 лет, 8 месяцев назад

Изменено 3 месяца назад

Просмотрено 211 тысяч раз

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

• HTML
• проверка

3

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

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

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

12

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

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

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

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

7

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

 
или же

 

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

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

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

5

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

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

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

3

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

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

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

4

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

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

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

Редактировать : Не делай этого; он не работает во всех браузерах (будет отображаться значок «сломанное изображение», как указано в комментариях к этому ответу). Используйте решение ниже. Или, если вы не заботитесь о валидности, но все же хотите избежать лишних запросов к вашему серверу, вы можете сделать без атрибута src. Но это INVALID HTML, так что выбирайте внимательно.

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

 [источник=''] {
    видимость: скрытая;
}
 

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

 Не разрешено загружать локальный ресурс: file://null/
 

 `