How to check for broken images in React JS

by

There is a native event for images called onerror that lets perform an action if the image cannot be loaded.

<img onError={this.addDefaultSrc} className="img-responsive" src={newsImage} alt={headline}/>

//in your component
addDefaultSrc(ev){
  ev.target.src="https://stackoverflow.com/questions/38527759/some default image url"
}

More Related Contents:

  1. React setState not updating state
  2. Does React keep the order for state updates?
  3. React: how to update state.item[1] in state using setState?
  4. How can I update state.item[1] in state using setState?
  5. setInterval in a React app
  6. React – setState() on unmounted component
  7. Update single value in item array | react redux
  8. How can I wait for setState to finish before triggering a function in React?
  9. Trying to use fetch and pass in mode: no-cors
  10. Rerender view on browser resize with React
  11. How to handle the `onKeyPress` event in ReactJS?
  12. Why is useState not triggering re-render?
  13. Is there a way to check if the react component is unmounted?
  14. react-router getting this.props.location in child components
  15. How do I use external script that I add to react JS?
  16. React form onChange->setState one step behind
  17. init state without constructor in react
  18. Event timeline with animation
  19. What do curly braces mean in JSX (React)?
  20. How to solve problem with too many re-renders in context?
  21. How to add tag using ReactJS?
  22. Axios. How to get error response even when api return 404 error, in try catch finally
  23. React suspense/lazy delay?
  24. How to use normal anchor links with react-router
  25. React router global header
  26. How can I dispatch function in redux?
  27. How to parse html to React component?
  28. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  29. State not getting updated when calling the related setState in React
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment