logo标签列表

如果src为空，则隐藏图片。

javascriptjqueryimagehide
6

我试图隐藏在源为空的情况下的<img>。但是我没有成功。

我在这里找到了几篇帖子，但对我没有用。

这是我的代码，它是基于表格的，因为它将成为一个模板： 图像：

<td width="92%" align="center" class="imagenes_desc">
        <a href="#" class="showcase"><img class="imagen" src="http://webs.ono.com/norfolk/ebay/images/01.jpg" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        <a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
        </td>

以下是我正在尝试实现的JavaScript代码。

<script type="text/javascript">
        $(document).ready(function(){
            if ($(".imagen").attr(src="") == "") {
                $(".imagen").hide();
            }
            else {
                $(".imagen").show();
            }
</script>

我对JS不是很熟悉，我在Stackoverflow上找到了这个脚本，但我无法让它工作。

更新

尝试这个，但不起作用（Chrome可以正常工作，但Firefox和IE不能）：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$("imagen").each(function(){

  if ($(this).attr("src") == "") 
       $(this).hide();
  else

      $(this).show();
});
</script>
<style>
.hide {display:none !important;}
.show {display:block !important;}
</style>

谢谢，

10个回答
30

你可以只使用CSS来实现这个功能：

img[src=""] {
    display: none;
}
<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

1
最好和最简单的答案在这里。干得好。 - G_Money
太好了。在Angular中，当与[src] =“image.data”一起使用时，image.data可能为空。您必须通过在css中放置img [src =“null”]或类似内容来尊重它。 - Jens Mander
1
这应该是被接受的答案，因为它不需要任何额外的类、js、alt=""或其他花哨的技巧。它还会自动显示图像，无论何时添加源。 - Katai
6
你的逻辑有漏洞。
if ($(".imagen").attr(src="") == "") {
  $(".imagen").hide();
}
else {
  $(".imagen").show();
}

这不会生效，因为你需要遍历每个 .imagen 实例。
$('.imagen').show().filter(function(){
  return $(this).attr('src') == '';
}).parents('a').hide();

以上代码展示了所有 .imagen 的元素，然后根据它们的 src 属性进行筛选，最后隐藏我们留下来的那些元素。

另外，您可能希望隐藏父级元素 <a> 而不是图片本身。

尝试了你的解决方案，但没有起作用。我怎么才能隐藏父级<a>？ - Artur Rain
@ArturasStrazdas - 我可以向您保证，上述方法是可行的。您可以使用 .parents()（如上所编辑）来选择父元素。 - ahren
6
明智地使用选择器 :D - Deepak Kamat
4

只需在alt标签中添加空格即可。以下是可行的代码：

 <img class="imagen" src="" width="800" alt" ">
2
你使用attr()方法获取src属性的值的语法错误。
请进行以下更改：
if ($(".imagen").attr(src="") == "") {

To

$(".imagen").each(function(){     
  if ($(this).attr("src") == "") 
       $(this).hide();
  else           
      $(this).show();
});
1
仍然无法按预期工作，因为存在多个.imagen。 - John Dvorak
2
我很惊讶你没有遇到语法错误，但是你的代码还是有问题的，因为它没有测试每一个 .imagen 的实例。请按以下方式修改：
```html // 代码示例 ```
```javascript // 代码示例 ```
```css // 代码示例 ```
$(".imagen[src='']").hide();
1
在您的样式表中添加以下代码来定义一个“hidden”类：
 .hidden {
    display: none;
}

然后添加以下javascript代码：
$(document).ready(function() {
   $(".imgagen").each(function() {
        var atr = $(this).attr("src"); 
        if(atr == "") {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
        }
    });
});
1
这是我如何在源不工作时隐藏图像的方法。
<img class="w-100" src="/not-working-url"
             onerror="this.onerror=null; this.src=this.style.display = 'none'"
        >
0

测试src属性是否为空，但是无论如何 - 如果隐藏图像，包装A元素会发生什么？相反，对于那些没有任何图像的元素不要生成A / IMG元素。

0

您发布的代码应该可以工作，但请确保在 HTML 页面头部添加了 jQuery 库文件。

前往 jQuery 网站下载 js 文件，然后在 HTML 页面 head 部分添加以下行：

1
谢谢，我已经修改了，现在没问题了 :) - Artur Rain
请不要投负面票，这可能只是像他所说的那样一个愚蠢的错误。 - Artur Rain
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接