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


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

This post cover 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 displays to browser. There are couple of improvements to this component

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

You might ask: how do you handle multiple images?

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

props/states to load images from URL

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

Props are directly accessible in a component, eventhough declaring a constructor. It works without 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 an component.

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

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

load images from local folder in react

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

  • public folder
  • src folder

First, if images served from public folder

public folder assets can be directly accessible in 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 src folder, you have to import the image with path from using 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 in Reactjs applications

Similar Posts