Контейнер изображений JavaScript без ошибки src

Я проверяю свой веб-сайт, и у меня есть небольшая галерея, и когда люди нажимают на картинку, она открывается в контейнере. Я использовал для этого javaScript, но валидатор w3 выдает ошибку в моем контейнере, потому что у него нет src. Мой вопрос, есть ли способ удалить эту ошибку?

<img src = "img/1203138907710_o.jpg" alt = "one" onclick = "myFunction(this);">


<div class = "container">
    <span onclick = "this.parentElement.style.display='none'" class = "closebtn">&times;</span>
    <img src = "" alt = "a" id = "expandedImg" style = "width:100%">
</div>         

function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    var imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    expandImg.parentElement.style.display = "block";
}

Также дополнительный вопрос. У меня 32 ошибки и 600 предупреждений от bootstrap.min.css, что, по вашему мнению, мне следует делать?

Где находится #imgtext в вашем HTML?

— 04.04.2019 01:42

я тебя отредактировал

— 04.04.2019 01:45

javascript html css

04.04.2019 01:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

360

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Решение:

Вы можете поместить хэш ( # ), чтобы избежать ошибки src. Это не рекомендуется для атрибутов href, поскольку это может вызвать побочные эффекты, но для атрибута src изображения этого достаточно.

<img src = "#" ...>

Альтернатива:

Вы также можете использовать URI данных в качестве заполнителя. Насколько мне известно, самое маленькое png изображение — это квадрат 1x1. (фактическая кодировка находится во фрагменте кода ниже)

<img src= "data:image/png;base64, ...encoding" ...>

Пример кода

<img src = "img/1203138907710_o.jpg" alt = "one" onclick = "myFunction(this);">


<div class = "container">
    <span onclick = "this.parentElement.style.display='none'" class = "closebtn">&times;</span>
    <img src = "#" alt = "a" id = "expandedImg" style = "width:50%">
    <img src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII = " alt = "a" id = "expandedImg2" style = "width:50%">
</div>

Доказательство прохождения:

Image of Passing W3 Validation

# помог отлично, большое спасибо. Что вы думаете о другой проблеме с bootstrap.min.css?

— 04.04.2019 02:20

@JavaBegginerIdiot не совсем так. Как профессиональный разработчик уже много лет я не знаю никого, кто хотя бы проходит валидацию через w3c. Это кажется излишним, но если вам нужно, вы должны иметь в виду, что он минимизирован, что, вероятно, не поддается проверке. Во-вторых, если вы настойчивы, вам просто придется перебирать ошибку за ошибкой, предупреждение за предупреждением и исправлять их.

— 04.04.2019 04:11

04.04.2019 02:11

Вы не можете. Самый простой подход — использовать изображение-заполнитель в src. Вы также можете удалить <img> и создать его динамически внутри контейнера.

<img src = "img/1203138907710_o.jpg" alt = "one" onclick = "myFunction(this);">

<div class = "container" id = "expandedImgContainer">
    <span onclick = "this.parentElement.style.display='none'" class = "closebtn">&times;</span>
</div>

<script>
function myFunction(imgs) {
    var div = document.getElementById("expandedImgContainer");
    var expandImg = div.querySelector('img') || document.createElement("img");
    expandImg.alt = "a";
    expandImg.style.width = "100%";
    expandImg.src = imgs.src;
    div.appendChild(expandImg);
    div.style.display = "block";
}
</script>

04.04.2019 02:12