«Плохое значение атрибута src на элементе img: должно быть непустым», для динамически генерируемого img src

У меня есть веб-сайт со слайдером изображения. Я сохраняю некоторые теги изображений пустыми, когда изображения загружаются, когда слайд появляется в поле зрения для более быстрой загрузки страницы. Теги изображения определяется следующим образом:«Плохое значение атрибута src на элементе img: должно быть непустым», для динамически генерируемого img src

<img data-src="img/portfolio-desktop1-small.png" src="" alt=""/>

Что я делаю на функцию слайд изменить src к data-src с JQuery анимации. Ползунок отлично работает. Моя проблема в том, когда я пытаюсь проверить его в w3c validation tool дает следующее сообщение об ошибке:

Line 131, Column 179: Bad value for attribute src on element img : Must be non-empty.
...data-src="img/portfolio-desktop1-small.jpg" src="" alt=""/> 
Syntax of URL:
Any URL. For example: /hello , #canvas , or http://example.org/ . > Characters should be represented in NFC and spaces should be escaped as %20 .

есть в любом случае, чтобы исправить это без изменения JavaScript или CSS? Если я оставлю это так, какие могут быть возможные вредные последствия этого вопроса?

источник

2015-06-05 Janaka Dombawela

Что произойдет, если вы просто удалите атрибут src и добавьте его на лету, когда вам это нужно. Атрибут src не требуется. И, по-моему, я бы не стал беспокоиться о том, что все равно докажет инструмент проверки w3c. Пока вы проверяете его в необходимых браузерах, и он работает.

источник

2015-06-05 05:07:01

Удаление 'src' дал мне другую ошибку, которая: > Линия 131, Колонка 172: Элемент IMG отсутствует необходимый атрибут SRC. хотя, наверное, я должен согласиться с вами, что на данный момент валидация w3c не достаточно хороша, чтобы волноваться прямо сейчас. –

Похоже, что инструмент проверки является просто непостоянной сукой. Я бы сказал, что просто перекрестный браузер проверяет это, чтобы гарантировать, что ничего не сломано и не назовет его днем. –

Атрибут ['src'] (http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-img-src) * требуется *. – unor

Установите изображение src атрибут #:.

<img data-src="img/portfolio-desktop1-small.png" src="#" alt="Thumbnail">

HTML, проходит W3C валидатор просто отлично, и современные браузеры знают, не пытаться загрузить несуществующий файл *

Для контраста , используя значение src, который ссылается на несуществующий файл результатов в запросе ненужную HTTP и сообщение об ошибке:

<img data-src="img/portfolio-desktop1-small.png" src="bogus.png" alt="Thumbnail">

Failed to load resource: The requested URL was not found on this server.

* Примечание: Я читал противоречивую информацию о том, как браузеры обрабатывают #. Если у кого-то есть окончательная информация, добавьте комментарий.

см Также в связи ответ от sideshowbarker:
https://stackoverflow.com/a/32491636

источник

2016-01-17 01:19:05

Я только что попробовал это в Chrome и снова загрузил текущий URL (html) для каждого изображения с помощью src = "#", так что это не сработает для меня. – ernesto

@ernesto. Вы можете посмотреть в консоли и убедиться, что ошибка 404, которую вы видите, содержит URL-адрес '#' только для того, чтобы убедиться, что у него нет проблем с загрузкой (он работает нормально для меня с Chrome v55. 0,2888,95 на macOS 10.12.2). –

Я не вижу 404. Я вижу, что базовый href (URL-адрес документа) извлекается снова для каждого изображения (или хотя бы один раз). – ernesto

«Плохое значение атрибута src на элементе img: должно быть непустым», для динамически генерируемого img src

ответ

Смежные вопросы