Установка изображения src в пустую

Я хотел бы установить изображение как ничего. Выполняя src="", многие говорят, что это может вызвать проблемы с браузерами:

http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

поэтому я не уверен, что ниже может возникнуть проблема с установкой src в пустую:

<img id="myImage">

так как в этом случае нет атрибута src.

Итак, если я хочу сначала установить изображение в ничто, что я могу сделать лучше всего?

Ответ 1

Лучшее решение

Инициализируйте изображение следующим образом: src="//:0" как здесь: <img id="myImage" src="//:0">

Изменить: согласно комментарию Alex ниже, использование //:0, по-видимому, может вызвать событие onError для img. Поэтому остерегайтесь этого.

Изменить 2. От комментария Drkawashima: Начиная с Chrome 61 src="//:0" больше не запускается событие onError.

Другое решение

В качестве альтернативы вы можете использовать очень маленькое изображение, пока вы на самом деле не заполните тег src: как это изображение. С помощью этого "очень маленького изображения" вы затем инициализируете тег следующим образом:

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />

источник

Удалить элемент из DOM

В качестве альтернативы, если вы просто не хотите, чтобы элемент отображался в DOM, просто используйте JavaScript:

var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);

_{(согласно этот ответ, использование функции JavaScript .remove() не рекомендуется из-за плохой поддержки браузера в DOM 4)}

Или просто используйте jQuery:

$("#myObject").remove();

Ответ 2

Просто используйте символ хеша #. Это действительное значение для атрибута src.:) fooobar.com/questions/39767/...

Ответ 3

Используйте этот script для установки изображения по умолчанию, если src пуст или пуст

        $(document).ready(function () {



            $('img').each(function () {

                if($(this).attr('src')=="")
                {
                    $(this).attr('src', 'Images/download.jpg');
                }

            });

        });
    </script>

Ответ 4

Наиболее распространенный способ, который я знаю (рекомендуется CSSTricks и т.д.), - это 1px-изображение в b

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> alt="">

Он появится в devtools как сетевой запрос 0B, поэтому, если вы выполняете мониторинг производительности, вы можете быть удивлены количеством запросов к изображениям. Но в противном случае это не о чем беспокоиться.

Примечание: всегда включайте пустой alt, в противном случае читатели экрана будут читать URL-адрес img вслух.

Ответ 5

Также вы можете установить атрибут display равным none как

<img src="" style="display:none" />