{

ReactJS How to display image from an URL|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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Basic React Interview questions and answers

Best ways to add an element to an array in React state with examples

Difference between Development and Production Builds in React

Difference between pureComponent and component in React

Difference between super and super props in React constructor class?

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials