Display an image from a URL or Local Path in React

# Table of ContentsDisplay an image from a URL in ReactDisplay an image from a local path in ReactDisplay an image from the public directory in React# Display an image from a URL in React

To display an image from a URL, use the img tag and set its src prop tothe complete URL of the image.

Optionally set the alt prop to a short description of the image.

App.jsCopied!import React from 'react';export default function App() { return ();}

The code for this article is available on GitHub

The example shows how to display an image from an external URL.

We used the img tag and set its src prop to the complete URL that points to the image.

Notice that the image that is self-closing - .

The alt prop helps screen readers understand what the image is about.

# Display an image from a local path in React

If you need to display an image from a local path in React:

Download the image and move it into your src directory.Import the image into your file, e.g.import MyImage from './thumbnail.webp'.Set the src prop of the image element to the imported image.App.jsCopied!import React from 'react';import MyImage from './thumbnail.webp';export default function App() { return ( {/* 👇️ local image */}{/* 👇️ external image */});}

The code for this article is available on GitHub

The example assumes that you have an image named thumbnail.webp in the samefolder as the App component.

Make sure to specify the correct path to the image file (including the extension).

For example, if you are importing an image from one directory up, you wouldimport as import MyImage from '../thumbnail.webp'.

The image has to be located in the src directory of your project.

Notice that in both examples we set the src prop on the img tag in order to render the image.

With images from an external URL, you set the src prop of the image to thecomplete URL.

With local images, you set the src proper of the img tag to the importedimage.

Depending on your setup, you might also be able to use the require() syntax todisplay local images.

App.jsCopied!import React from 'react';export default function App() { return ( {/* 👇️ local image */});}

The code sample assumes that there is a thumbnail.webp file located in thesame directory as your App.js module.

You can also check out my detailed guide onhow to import an image in React.

# Display an image from the public directory in React

You can also render images that are located in the public directory of yourReact project.

When your images are located in the public directory, use an absolute path.

The following example assumes that there is a thumbnail.webp image locatedunder public/images/thumbnail.webp.

App.jsCopied!import React from 'react';export default function App() { return ();}

The code for this article is available on GitHub

Notice that we specified an absolute path to the image - one that starts with aforward slash.

pathCopied!public/ images/thumbnail.webp

The public folder is omitted and the path starts at the images directory.

Make sure to specify the extension of the image in the value of the srcattribute.

I've also written a detailed guide onwhere you should store images in a React app.

# Additional Resources

You can learn more about the related topics by checking out the followingtutorials:

Import and use an Image in a React componentHow to Use an Image as a Link in React.jsSetting a background image with inline Styles in React

云奕文章网

Display an image from a URL or Local Path in React

相关推荐：