Error Handling While Use Image Render In React

The React debug process will always throw an error while we use image src to display image, whenever we use required props to render the image on DOM, it always validates whether defined path of the image is available or not, in case of its not available it will throw an error, so to handle that error you can use custom component in react application.

Introduction

 

When you want to add a picture to a website you write a simple line such as this:

<img src="smiley.gif" alt="Smiley face">

ReactJs has the in-built function to render the local image with require ('pathname') in webpack.

<img src={require('../images/image-name.png')} />

In order to use this default functionality, we need to provide a physical path as a parameter. So whenever your application builds a webpack, it is responsible for getting the image from the specified physical path. But in case no file is available on the specified path then it will throw an error.

 

Solution

 

You need to error handle over this point, so that you can create custom control or component to handle this error.

 

Step 1

 

Choose your default image which you want to display when the image is not found, and place a default image on the desired folder in your application.

 

Step 2

 

For error handling you need to create a custom component as below.

import React from 'react';

class CustomImg extends React.Component {
    render() {
        let image_path = '';
        try {
            image_path = require('../../../images/' + this.props.src);
        } catch(err){
            image_path = require('../../../images/no_image.svg');  //set default image path
        }
        return (
            <img width={this.props.width} src={image_path} className={this.props.className} alt={this.props.alt} />
        );
    }
}

export default CustomImg;

Step 3

 

Use the CustomImg component wherever the image is required to display.

import React, { Component } from 'react';
import CustomImg from '../../Global/CustomImg/CustomImg';

class App extends Component {
    render() {
        return (
            <React.Fragment>
                <div>
                    <CustomImg src="sample.png" className="container-close float-right" alt="sample Image" />
                </div>
            </React.Fragment >
        );
    }
}

export default App;

 

Summary

 

CustomImg component is a customized component which can handle the error of rendering an image using React. You can customize this component as per your convenience by using props functionality. Right now only className, width, src, alt properties are handled dynamically.

 

I hope it helps you!!!.