I'm writing a module that takes article data from json and shows a large image over the article text, a hero module as they say.

I've got the data and have set it up so if there is an image, it will show that image and if there is no image in the data, it will show a default image.
Problem is that this method doesn't replace broken links to show the default image.

I'm still new to react and using state ... question is, should I be using state to check for the broken link and how do I do it?

This is how I get the data in as props in the module:

const { newsItemData: {

          headline = '',

          bylines = [],

          publishedDate: publishDate = '',

          updatedDate: updatedDate = '',

          link: newsLink = '',

          contentClassification: category = '',

          abstract: previewText = '',

          abstractimage: { filename: newsImage = '' } = {},

          surfaceable: { feature: { type: featureType = '' } = {} } = {},

        } = {},

        wideView,

        showPill,

        defaultImage } = this.props;

I display the info in this way:

<div className={imageContainerClassName} style={customBackgroundStyles}>

      {newsImage ? <img className=img-responsive src={newsImage} alt={headline}/> : <img className=img-responsive src={defaultImage} alt={headline}/>}

</div>

What should I do in order to also check for broken images?
I think this is all the pertinent data needed, let me know if I should show anything else.
Thanks!