Best practice to deal with 404 error on images in emberJS

1

I’m wondering… what would be the best way to have a placeholder (dummyimage) for all images that can’t be requested (404).

Is there a solution on front end side? How do you solve this?

So far I only came up with a back end solution like: .htaccess - Replace invalid image url with 404 image - Stack Overflow

2

Perhaps refactor my super old code to show a dummyimage:

<img border="0" src="http://www.twitxr.com/image/$inr/th/" onload="show(this);" onerror="suicide(this);"/>

function suicide(el)
{
  if (el.outerHTML)
    el.outerHTML = "";
  else if (el.parentNode && typeof(el.parentNode.removeChild) != "undefined")
   el.parentNode.removeChild(el);
 else if (el.style)
   el.style.display = "none";
}

function show(img)
{
  if (!img)
    return;
  img.style.display = "inline";
  if (img.width == 153 && img.height == 42 && (!img.fileSize || img.fileSize == 2395))
    suicide(img);
}
3

Why not just write a component display-image which you can include like this?

{{display-image src=src placeholder=placeholder}}

It makes an ajax call on src and on success simply displays the returned image, otherwise it displays your placeholder.

3 Likes
4

yeah, writing a component for the img tag was the easiest way to go and I suppose it’s a pretty ember way as well! Also can be found her: javascript - Change broken link icon in Ember - Stack Overflow

Thanks for the input!

2 Likes