Skip to content
Related Articles

Related Articles

What is the best way to replace image with default image on error in ReactJS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Jul, 2022
View Discussion
Improve Article
Save Article

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.

App.js




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. 

App.js




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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!