Question

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

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

server＆GT;

JS用于隐藏图像

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

CSS

<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>

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

非常感谢

Answer 1

使用CSS代替更优雅，不需要Javascript，假设错误的src s ~~以HTML中的[开头：~~是空字符串：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 2

不需要CSS替代

您可以使用此功能，但这并非隐藏它从页面中删除（DOM）：

<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >

Answer 3

使用jquery

$("img").error(function(){
        $(this).hide();
});

或

$("img").error(function (){ 
    $(this).hide();
    // or $(this).css({'display','none'}); 
});

src未知时隐藏图像

3 个答案: