src未知时隐藏图像

Question

我试图在没有WordPress的src的情况下隐藏图像.

以下是显示在前端的图像代码

<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>

JS用来隐藏图像

<script type="text/javascript">
$(document).ready(function() {
   $(".galimage").each(function() {
        var atr = $(this).attr("src"); 
        if(atr == "") {
            $(this).addClass("hidegalimage");
        } else {
            $(this).removeClass("hidegalimage");
        }
    });
});
</script>

CSS

.hidegalimage {
display:none;
}

但我仍然可以看到破碎的图像图标和图像边框.查看JSFiddle.有人可以解决我的问题或给我一个如何隐藏图像的建议吗？

非常感谢

Answer 1

使用CSS代替更优雅,不需要Javascript,假设坏的srcs 以[HTML 开头:是空字符串:

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

<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>