Best practice to deal with 404 error on images in emberJS


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:


Perhaps refactor my super old code to show a dummyimage:

<img border="0" src="$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")
 else if ( = "none";

function show(img)
  if (!img)
    return; = "inline";
  if (img.width == 153 && img.height == 42 && (!img.fileSize || img.fileSize == 2395))


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.


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:

Thanks for the input!