In this article, we will learn to replace the image with the default image when an error occurs in ReactJS. Sometimes, it happens that the image source URL is broken or empty. In this scenario, we can replace the current image source URL with the default image source URL to fix the image rendering error.
Prerequisites: The prerequisites for this article:
Creating Application: The below command will help you to start a new react app.
npx create-react-app testapp
Next, you must move to the testapp project folder from the terminal.
cd testapp
Project directory: It should look like this.
Example: The below example shows you that when the image URL is broken, it shows alternative text only. Add the below code to the respective files.
- App.js: In this file, we have implemented the code for the broken image URL, and it shows alternative text only.
Javascript
import React, { Component } from 'react';class App extends Component { render() { return ( <div style={{ width: "600px" }}> {/* original image div */} <div className='imageDiv' style={{ border: '3px dashed red', margin: "10px", }}> <h2>Original Image</h2> <img src= alt="Original one" /> </div> {/* broken image div */} <div className='imageDiv' style={{ border: '3px dashed red', margin: "10px", }}> <h2>When image URL is Broken</h2> <img src="" alt="broken Image" /> </div> </div> ); }}export default App; |
Steps to Run: To start the react app, run the below command on your terminal and verify that react app is working fine.
npm start
Output:
To solve a broken image error, we can replace the image source URL with the default image URL.
Example: This example resolves the error of a broken image and replaces it with the default image. Add the below code to the respective files.
- App.js: In this file, we have implemented replaceImage() function, and it will be called when an error occurs, and it replaces the current image URL with the default image.
Javascript
import React, { Component } from 'react';class App extends Component { constructor(props) { super(props); this.state = { defaultImage: }; } // replace image function replaceImage = (error) => { //replacement of broken Image error.target.src = this.state.defaultImage; } render() { return ( <div style={{ width: "600px" }}> {/* original image */} <div className='imageDiv' style={{ border: '3px dashed red', margin: "10px", }}> <h2>Original Image</h2> <img src= alt="Original one" onError={this.replaceImage} /> </div> {/* replacing broken image by calling the replaceImage() function on error */} <div className='imageDiv' style={{ border: '3px dashed red', margin: "10px", }}> <h2>When image URL is Broken</h2> <img src="" alt="Opps! URL is broken" onError={this.replaceImage} /> </div> </div> ); }}export default App; |
Steps to Run: To start the react app, run the below command on your terminal and verify that react app is working fine.
npm start
Output:
