¿Cuál es la mejor manera de reemplazar la imagen con la imagen predeterminada en caso de error en ReactJS?

En este artículo, aprenderemos a reemplazar la imagen con la imagen predeterminada cuando ocurre un error en ReactJS. A veces, sucede que la URL de origen de la imagen está rota o vacía. En este escenario, podemos reemplazar la URL de origen de la imagen actual con la URL de origen de la imagen predeterminada para corregir el error de representación de la imagen .

Requisitos previos: Los requisitos previos para este artículo:

• reaccionar conocimiento

Creación de la aplicación: el siguiente comando lo ayudará a iniciar una nueva aplicación de reacción .

npx create-react-app testapp

A continuación, debe pasar a la carpeta del proyecto testapp desde la terminal.

cd testapp

Directorio del proyecto : Debería verse así.

 

Ejemplo: El siguiente ejemplo muestra que cuando la URL de la imagen está rota, solo muestra texto alternativo. Agregue el siguiente código a los archivos respectivos.

• App.js: en este archivo, hemos implementado el código para la URL de la imagen rota y solo muestra texto alternativo.

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214422/galaryImage8.png"
                        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;

Pasos para ejecutar: para iniciar la aplicación de reacción, ejecute el siguiente comando en su terminal y verifique que la aplicación de reacción funcione correctamente.

npm start

Producción:

 

Para resolver un error de imagen rota, podemos reemplazar la URL de origen de la imagen con la URL de la imagen predeterminada.

Ejemplo: este ejemplo resuelve el error de una imagen rota y la reemplaza con la imagen predeterminada. Agregue el siguiente código a los archivos respectivos.

• App.js: en este archivo, hemos implementado la función replaceImage() , y se llamará cuando ocurra un error, y reemplazará la URL de la imagen actual con la imagen predeterminada. 

import React, { Component } from 'react';
  
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultImage:
'https://media.geeksforgeeks.org/wp-content/uploads/20220608214420/galaryImage5-300x300.png',
        };
    }
  
    // 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214422/galaryImage8.png"
                        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;

Pasos para ejecutar: para iniciar la aplicación de reacción, ejecute el siguiente comando en su terminal y verifique que la aplicación de reacción funcione correctamente.

npm start

Producción: