Hide image if src is empty

Question

I'm trying to hide <img> if the source is empty. But I have no luck.

I found few posts here, but it doesn't work for me.

Here is my code, it's table based because it will be a template: Images:

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

Here is the Javascript I'm trying to implement.

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

I'm not very familiar with JS, I found this script here on Stackoverflow, but I can't get it to work.

Update

Trying this, but doesn't work (Chrome hides well, but Firefox and IE don't):

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

Thanks,

Kermitkermy

Answer 1

How about using jQuery's attribute selectors?

    $(document).ready(function(){
        $('.imagen[src=""]').hide();
        $('.imagen:not([src=""])').show();
    });

Working example here

Chiachiack

Used the selectors wisely :D – Coffle

Answer 2

You can just use CSS for this:

img[src=""] {
    display: none;
}

<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

Cramer

Best and most simplest answer here. Good job – Stagecraft

Thats great. In Angular, when used with [src] = "image.data", image.data might be empty. You have to respect that by putting img[src="null"] or comparable in you css. – Mold

This should be the accepted answer, as it doesn't require any additional classes, js, alt="" or other fancy tricks. It also always automatically shows the image whenever a source is added later. – Apotheosize

Nice and simple solution! – Inhabiter

Answer 3

Your logic is flawed.

if ($(".imagen").attr(src="") == "") {
  $(".imagen").hide();
}
else {
  $(".imagen").show();
}

This will not work, as you've got iterate through each instance of .imagen

$('.imagen').show().filter(function(){
  return $(this).attr('src') == '';
}).parents('a').hide();

Above, we show all the .imagen's, then filter based on their src attribute, then hide the one's we're left with.

As a side point, you may want to hide the parent <a> element, rather than the image.

Ungrounded

Tryed your solution, but didn't work. How can I hide parent <a> ? – Kermitkermy

@ArturasStrazdas - I can assure you, the above would work. You can use .parents() (as edited above) to select the parent elements. – Ungrounded

Answer 4

Just put space inside alt tag.Here is working code

 <img class="imagen" src="" width="800" alt" ">

Spiny

Answer 5

You have wrong syntax for getting value of src by attr()

Change

if ($(".imagen").attr(src="") == "") {

To

$(".imagen").each(function(){     
  if ($(this).attr("src") == "") 
       $(this).hide();
  else           
      $(this).show();
});

Cathrinecathryn

Still won't work as expected since there are multiple .imagens – Binford

Answer 6

I am surprised that you don't have some kind of syntax error And you're code is also wrong, because it does not test every instance of .imagen.

Do it like this

$(".imagen[src='']").hide();

Noseband

Answer 7

In your stylesheet make add the following code to define a "hidden" class:

 .hidden {
    display: none;
}

Then add the following javascript code:

$(document).ready(function() {
   $(".imgagen").each(function() {
        var atr = $(this).attr("src"); 
        if(atr == "") {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
        }
    });
});

Macroclimate

Answer 8

This is how I hide the image when source doesn't work

<img class="w-100" src="/not-working-url"
             onerror="this.onerror=null; this.src=this.style.display = 'none'"
        >

Modestine

Answer 9

test for src attribute if its null, but anyway - if you hide images what happens to the wrapping A elements? Rather, dont generate A/IMG elements for those not having any image.

Matheson

Answer 10

Your code that you have posted should work but make sure that u have added the jquery library files on the header of ur html page .

go to jquery site and then download the js file. then add the following line on HTML page section head :

Phial

Thanks, I revised that and it was ok :) – Kermitkermy

Please don't vote negative, it could have been a stupid mistake like he mentioned. – Kermitkermy