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:
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.
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= "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.
App.js
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:
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA