没有src错误的JavaScript图像容器

Question

我正在验证我的网站，并且我的画廊很小，当人们单击图片时，它将在容器中打开。我为此使用了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";
}

还有一个额外的问题，我从bootstrap.min.css中遇到32个错误和600个警告，您认为我应该怎么做？

Answer 1

解决方案：

您可以放置​​一个哈希（＃）以避免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>    

---

通过证明：

Answer 2

不能。最简单的方法是在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>