How To Display An Image From A URL / local Path In React

Using images will make your website more lively. See the information we provide in this article to learn how to display an image from a URL / local path in React.

Display an image from a URL / local path in React

To display an image in React, we use the img tag.

Syntax:

<img src="..." />

The same as HTML. The img tag is used similarly in React. The src prop points to the path of the image you want to display.

At this point, there will be two cases. 

• Display the images from external links (URL). 
• Display the images via a local path.

Image from URL

This approach is straightforward. You just need to get the URL of the image and then set it to the src prop. 

However, when the link to the image is removed, the image will not be displayed. You should use the alt prop just in case that happens.

const App = () => {
    return (
        <div>
          	<img src='https://learnshareit.com/wp-content/uploads/2022/09/image-25.png' alt='demo image'/>
        </div>
    )
};

export default App;

Output:

Image from local path

Option 1: Import the image into the component

Suppose we have a picture named ‘Lotus.jpg‘ placed in the ‘src‘ folder. 

Now we will import that image into the App component. 

You can reference it through the variable name. The name can be anything you want. There’s no rule about naming variables that have to be related to your image or anything.

import Lotus from './Lotus.jpg';

const App = () => {
    return (
        <div>
          	<img src={Lotus}/>
        </div>
    )
};

export default App;

Output:

In this case, the App.js file and the image are both in the ‘src‘ folder, so we have the following path: ./Lotus.jpg. Pay attention to the file path when using this method in your project to avoid errors.

Option 2: Put the image in the public directory

Another approach, you can move your images to the ‘public‘ folder in your project. You then declare the path to your image in the src prop, omitting the /public. 

React will automatically find the path in the ‘public’ directory that matches the path you declared for the src prop.

For exmample, you already have a picture named ‘sun_flower.jpg‘ in the ‘public‘ folder. See the following code for better understanding:

const App = () => {
    return(
        <div>
          	<img src='sun_flower.jpg'/>
        </div>
    )
};

export default App;

Output:

Note: Just like when using the import statement, pay attention to the file path to avoid unexpected errors. It may not be the same as our example when you work on your project.

Summary

In conclusion, this is the answer to the question “How to display an image from a URL / local path in React?”. Choose the appropriate method for the respective case. That’s all I want to cover in this article. Thank you for reading.

Maybe you are interested:

• Get Input value when Enter key is pressed in React
• Set and Access state using a Dynamic key in React
• How to Prevent form submission in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js