Can I detect with JavaScript, when a file preview (renditionDownload) is not immediately available?

Question

In a Lightning Component Im previewing a file immediately after upload:

  <img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }" />

After uploading a non-image file (doc/pdf/xlxs), the preview will initially display a broken image icon. My guess is that this is because the file takes a few seconds to be converted to an image.

A few seconds after the upload though, the image is available...

I would like to catch this, and display an alternate message if the preview is not yet available. I was hoping it would throw a 404 and use onError, but it doesnt produce an error. (A CSV file throws a 404, but it never generates a preview, so its never available)

Is there any way to detect this, in javascript or otherwise?

=====================

Edit - To clarify, I would like to be able to detect when the broken image icon is visible, and display an alternate Div with a nicer UI message. Not just the alternative text message (Thanks for the suggestion though)

Answer 1

The image tag in html has "alt" attribute .You can use that for your purpose

  <img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }" alt="My message"/>

Update :

Looks like you can add an "onerror" and call a function so i will manipulate as below

<img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }" alt="My message" onerror="{!c.showloading}" aura:id="test"/>

controller.js

{
  showloading : function(component,event,helper){
     //Write a default image
    component.find("test").src = '/image loader'

  }

}