Javascript - replace broken image by text (div; css class)

Question

I am trying to replace all broken image by JS. I use this code to replace all broken images by notfound.png image.

    $(document).ready(function() {
    $('img').attr('onError', 'this.src="notfound.png"');
});

Anyway, I would like to replace them by a text notice instead of image. I cannot find the proper way how to do it, thank you very much for your help. JS is not my cup of coffee :(

I would like to use this for the text part:

Text to to shown...

EDIT: OK, I have found this solution working fine, but doesnt accept CSS class

<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404');
});
});
</script>

Anyway as I wrote CSS class is not added, so this solution is not complete :(

CSS will be:

.error404 {
   display: block;
   color: #667d99;
   font-weight: bold;
   font-size: 11px;
   border: 1px dotted;
   border-radius: 3px;
   padding: 5px;
   margin: 10px;
   background: #e7edf3;
   text-aling: center;
}

Patrik Krehák · Accepted Answer · 2017-03-20 11:47:20Z

1

Ok, I think I have found a solution for you. I tried to use jQuery error function. This one helped me:

To replace all the missing images with another, you can update the src attribute inside the callback passed to .error(). Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely.

In your example this would be the best:

$('img').each(function() {
    var img = $(this);

    img.error(function() {
        img.replaceWith('<div class="error404">Image not found (error 404)</div>');
    }).attr('src', img.attr('src'));
});

I also made a jsFiddle example for you, which is working great for me.

answered Mar 20, 2017 at 11:47

Patrik Krehák

2,6938 gold badges36 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

clueless · Accepted Answer · 2017-03-19 18:06:01Z

1

You can create a text node and append it to the parent of img, and optionally remove img if needed. This code goes inside the error handler for img

$('img').on('error', function(){
    $(this).parent().append($('<div>Broken image</div>'));
    $(this).remove();
})

answered Mar 19, 2017 at 18:06

clueless

215 bronze badges

Comments

Phugo · Accepted Answer · 2017-03-19 18:06:13Z

0

If you really need to use javascript for this try

$(document).ready(function() {
    $('img').attr('alt', 'Alternative text');
});

But the same is achievable by barebone HTML

<img src="path/to/image.jpg" alt="Alternative text">

answered Mar 19, 2017 at 18:06

Phugo

4001 silver badge10 bronze badges

Comments

SROwl · Accepted Answer · 2017-03-19 18:09:30Z

0

You can change the alt if an error is thrown just like you're doing with the image.

function imgMissing(image) {
image.onerror = "";
image.alt = "Image not Found";
return true;
}

The HTML:

    <img src="image.jpg" onerror="imgMissing(this);" >

answered Mar 19, 2017 at 18:09

SROwl

2951 silver badge6 bronze badges

Comments

Eldenroot · Accepted Answer · 2017-03-20 11:09:32Z

0

EDIT: OK, I have found this solution working fine:

<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>');
});
});
</script>

Anyway one more think, I need to add CSS class "error404" for this "div", how to do that in JS? Thank you very much!

CSS will be:

.error404 {
   display: block;
   color: #667d99;
   font-weight: bold;
   font-size: 11px;
   border: 1px dotted;
   border-radius: 3px;
   padding: 5px;
   margin: 10px;
   background: #e7edf3;
}

answered Mar 20, 2017 at 11:09

Eldenroot

379 bronze badges

3 Comments

Eldenroot Over a year ago

So that code will be $(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404'); ???

Patrik Krehák Over a year ago

$(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404');

Patrik Krehák Over a year ago

look at my answer, I found a solution for you.

Collectives™ on Stack Overflow

Javascript - replace broken image by text (div; css class)

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related