CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 23999

Replace empty src with image url - JQuery

I have a page with multiple images, all with class .listImage

<img src="/path/to/image1.png" class="listImage">
<img src="/path/to/image2.png" class="listImage">
<img src="" class="listImage">
<img src="/path/to/image3.png" class="listImage">

On some occasions these may actually not have a .src value, therefore I want to replace any that don't with a dummy image.

Here's what I'm trying but doesn't work for some reason:

$().ready(function() {
    $('.listImage').each(function () {
        if (this.src.length == 0) {
            $(this).attr('src','/images/img_blank.png');
        }
    });
});

Upvotes: 0

Views: 1111

Answers (9)

Nagesh Reddy
Nagesh Reddy

Reputation: 9

Also see this code

$('.listImage').each(function () {
    if ($(this).attr("src")=="") {
        $(this).attr('src','/images/img_blank.png');
    }
});

Upvotes: 0

Aamir Afridi
Aamir Afridi

Reputation: 6411

Use the simple way: http://jsfiddle.net/aamir/WgF5H/1/

$('.listImage[src=""]').attr('src', '/images/img_blank.png')

Upvotes: 0

dhana
dhana

Reputation: 6525

Here is

$(document).ready(function() {
    $('.listImage').each(function (index,i) {
        alert(index)
        if ($(".listImage:eq("+index+")").attr("src").length == 0) {
                $(".listImage:eq("+index+")").attr('src','/images/img_blank.png');
        }
    });
});

Upvotes: 0

Freelance PHP Programmer
Freelance PHP Programmer

Reputation: 370

Just in case you are using attribute like data-src instead src. this would work:

$('.listImage').each(function () {
    if (!hasAttr('src')) {
     temp_attr = $(this).attr('data-src'); //temporary attribute for your src

        $(this).attr('src',temp_attr); //Create src attribute with your value

    $(this).removeAttr('data-src'); //remove temporary attribute to clean up stuff.
    }
});

from above code, in case you are using img tag like this:

<img data-src="image.png">

will convert to img tag with src attribute like this:

<img src="image.png">

Hope this helps!

Upvotes: 0

Joe
Joe

Reputation: 8292

Not sure if this is your problem but . . .

change $() to $(document)

did that fix it?

if not try . . .

$(document).ready(function() {
    $('.listImage').each(function () {
        if($(this).attr("src") == "#") {
            $(this).attr('src','/images/img_blank.png');
        }
    });
});

Change the empty src attribute value to #

Upvotes: 0

Anton
Anton

Reputation: 32591

Try this using attribute selector

$().ready(function () {
    $('.listImage[src=""]').attr('src','/images/img_blank.png');
});

Upvotes: 4

saman khademi
saman khademi

Reputation: 842

try this

$(document).ready(function(){
   $('.listImage').each(function (index,value) {
        if ($(value).attr('src')=='') {
            $(value).attr('src','notfound.png');
        }
    });
}

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

use:

$('.listImage').each(function () {
    if ($(this).attr('src') == '') {
        $(this).attr('src','/images/img_blank.png');
    }
});

Upvotes: 0

Pesulap
Pesulap

Reputation: 894

Use this condition

if (this.attr("src").length == 0) {

Try this:

$(document).ready(function() {
  $('.listImage').each(function () {
    if (this.attr("src").length == 0) {
        $(this).attr('src','/images/img_blank.png');
    }
  });
});

Upvotes: 0

Related Questions