Question posted in
You can find the official documentation here.

Image (img) tag returns 404 and a default image – Jquery ajax

my Image tag

<img src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg">

i tried this ( this works with the rest of 404 image URLs but not with youtube thumbnail url )

$('img').on('error', function() {
    $(this).attr('src', 'http://i.giphy.com/9J7tdYltWyXIY.gif');    // show a fallback image if there is an error
});

and

<img src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg" onError="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

I guess youtube already returning a default 404 image, that might be a reason.

Tags:

2

Answers


  1. 0

    you forget the extension file ??

    https://placeimg.com/200/300/animals.jpg

    try this

    <img src="http://example.com/non-existent-image.jpg" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals6';" />
    Login or Signup to reply.
  2. 0

    YouTube answers will not fire the onerror() function because YouTube sends image which shows the gray video icon. The approach, knowing dimensions of the returned image is to detect it and replace it with our backup image. Try running snippet below:

    $(function() {

  $('.youtube-thumb').each(function(ix, it){
    if($(it)[0].naturalHeight <= 90 ) {
      var path = $(it).attr('src').replace('https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg','https://placeimg.com/200/300/animals');
      
      $(it).attr('src', path);
    }
    
  });
  
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="youtube-thumb" src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg" border="1" height="100" alt="image" />
</div>

    Or to handle every image in the time of loading it instead of waiting for all and iterating over them:

    $(function() {

  var img = document.querySelector('img');

  if (img.complete) {
    check404(img)
  } else {
    img.addEventListener('load', check404)
  }
  
});

function check404(img) {

if(img.naturalHeight <= 90 ) {
  img.src = 'https://placeimg.com/200/300/animals';
}

}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg" border="1" height="100" alt="image" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search