Error Handling While Use Image Render In React

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!!!.