ReactJS How to display image from an URL or local folder with example

In this tutorial, You will learn how to display an image from a URL or local folder in the Reactjs application.

This post covers the following things

#React Simple Image component

In HTML, <img> tag displays the image using src attribute

Here is an example usage of HTML img tag:

<img src="https://picsum.photos/200" alt="display image" />

if you want to display the image in react, Create a component as follows.

import React, { Component } from "react";

class ImageComponent extends Component {
  render() {
    return (
      <div>
        <img src="https://picsum.photos/200" alt="display image" />
      </div>
    );
  }
}

export default ImageComponent;

It is simple to call the component in javascript or JSX file For example, In App.js

import "./App.css";
import ImageComponent from "./components/ImageComponent";

function App() {
  return (
    <div className="App">
      <h1>React Example</h1>
      <ImageComponent url="https://picsum.photos/200" />
    </div>
  );
}

export default App;

Here, The image url is loaded in the component and displayed to the browser. There are a couple of improvements to this component

First, The Image url is fixed not dynamic. Second, So you need to create multiple components for displaying multiple images.

You might ask: how do you handle multiple images?

Yes, possible to load multiple images with the single component declaration.

#props/states to load images from URL

In The component, Move the setting of the URL to the outside component. Use this.props to load an image from the URL. Set src using this.props.url value.

Props are directly accessible in a component, even though declaring a constructor. It works without a constructor.

import React, { Component } from "react";

class ImageComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <img src={this.props.url} alt="display image" />
        <img src={this.props.url} alt="display image" />
      </div>
    );
  }
}

export default ImageComponent;

In App.js, multiple images are passed as a property to a component.

<ImageComponent url="https://picsum.photos/200" />
      <br></br>
<ImageComponent url="https://picsum.photos/200/300" />

this way, It is very easy and simple to load images from URL in reactjs.

#load images from a local folder in react

In React applications, Images are served from different folder locations.

• public folder
• src folder

First, if images are served from public folder

public folder assets can be directly accessible on HTML pages

image 200.jpg places in public/images/200.jpg location

You can directly provide the path in App.js while calling component

<ImageComponent url="images/200.jpg" />

if images are in the src folder, you have to import the image with a path from using the import feature

import myimage from "./200.jpg";

Call the above component created with passing url=myimage

<ImageComponent url="{myimage}" />

#Conclusion

You learned how to load images from URL/local public/src folder and display them in Reactjs applications