Скрыть тег img, если src пуст, но без javascript/jQuery или css3

Я проектирую шаблоны в Channel Advisor для магазина eBay, и он не позволяет javascript/jQuery. Кроме того, CSS3 не работает в различных версиях IE, специально нарушена реализация img[src=].

Когда я использую теги шаблонов в img, например:

<img src="{{THUMB(ITEMIMAGEURL1)}}"/>

где {{THUMB (ITEMIMAGEURL1)}} - путь к изображению, если изображение отсутствует, а шаблон отправлен на eBay, тогда конечный результат будет таким:

<img src=""/>

и это показывает сломанное изображение.

Есть ли способ скрыть <img src=""/> с помощью HTML или CSS, который работает в IE7 +

Ответ 1

Вы можете использовать [attr=val] селектор

img[src=""] {
   display: none;
}

Вышеуказанный селектор будет просто соответствовать, если атрибут src не имеет значения. Этот селектор является общим и будет соответствовать тегу img в документе с пустым src, если вы хотите настроить таргетинг на определенные, чем использовать более специфичный селектор, например

.class_name img[src=""] {
    display: none;
}

Демо

Демо (Без указанного выше селектора см. красную строку? )

В качестве альтернативы, если вы хотите зарезервировать место, занимаемое тегом img, вы можете использовать visibility: hidden; вместо display: none;, поскольку display: none; просто испортит ваш макет, где visibility: hidden; зарезервирует пространство, он просто скроет img

См. разницу между display: none; и visibility: hidden;

Демо (visibility: hidden;, резервное пространство)

Демо 2 (display: none; не зарезервирует место)

Примечание. Ни один из вышеперечисленных селекторов не удалит тег img из DOM, он просто скроет его с передней стороны

Ответ 1

Ответ 2