Який вірний спосіб включити зображення без 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://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

Цього дня IMHO найкращий короткий, розумний та дійсний спосіб для порожнього src img:

<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. В іншому випадку, якщо у вас є такий тег зображень, і ви хочете зробити його валідаційним, ви можете розглянути можливість використання фіктивного зображення, наприклад, 1px прозорого gif або png.

Я цього не робив давно, але мені довелося один раз пройти те саме.

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

Моя улюблена - з //:0них випливає, що ви спробуєте встановити HTTP / HTTPS-з'єднання з початковим сервером на нульовому порті (порт tcpmux?) - це, мабуть, нешкідливо, але я б краще все одно не робив. Чортів, браузер може побачити порт нульовий і навіть не надсилати запит. Але я все-таки вважаю за краще це не вказано таким чином, коли це, мабуть, не те, що ви маєте на увазі.

У будь-якому випадку, рендерінг about:blankнасправді дуже швидкий у всіх браузерах, які я тестував. Я просто кинув його у валідатор W3C, і він не скаржився, тому він може бути дійсним.

Редагувати : не робити цього; він працює не у всіх браузерах (він покаже піктограму "зламане зображення", як зазначено в коментарях до цієї відповіді). Використовуйте <img src='data:...розчин нижче. Або якщо ви не переймаєтесь дійсністю, але все ж хочете уникати зайвих запитів на вашому сервері, ви можете зробити <img alt="" />атрибут no src. Але це ІНВАЛІД HTML, тому вибирайте це уважно.

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

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

Я раніше не знайшов цієї відповіді, але згідно з дійсним порожнім тегом W3 Specs специфікація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"/>