How to Display a List of Images in React Js

React is a popular JavaScript library for building user interfaces, and displaying a list of images is a common requirement in many web applications. In this article, we will explore different methods to accomplish this using React. Whether you have images stored within your application or need to fetch them from an API, we’ve got you covered. Let’s dive in!

1. Display List of Images Stored Within Your Application

If you have a predefined set of images stored within your application, you can import and display them using React. Here’s how:

1. Create a folder for the Images Create a folder within your project directory(within the src directory) to store the images.

2. Import the Images Into React Import the images using the import statement in your React component file.

3. Display the Images Render the images by mapping over the imported image paths and creating <img> elements for each image.

// Importing the Images
import React from 'react';
import image1 from './path/to/image1.jpg';
import image2 from './path/to/image2.jpg';

// Displaying the images
const LocalmageList = () => {
  return (
  <div>
    <img src={image1} alt="Image 1" />
    <img src={image2} alt="Image 2" />
    {/* Add more images as needed */}
  </div>
  );
};

export default LocalImageList;

This method is suitable when you have a small number of images that are known at the development stage and won’t change dynamically during runtime. It works well for static image lists or when you need to display a predefined set of images in your React component.

2. Display List of Images From an API

If you need to fetch a list of images dynamically from an API, React makes it easy to integrate with APIs and render the retrieved images. Follow these steps:

1. Fetch Images Data Use a library like fetch or axios to make an API call and retrieve the image data.

2. Store Fetched Data in State Store the fetched image data in the component’s state using React Hooks like useState or useEffect.

3. Display Images Render the images by mapping over the retrieved image data and creating <img> elements for each image.

// Fetching Images from an API
import React, { useEffect, useState } from 'react';

const ApiImageList = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/images')
      .then((response) => response.json())
      .then((data) => setImages(data));
  }, []);

  return (
    <div>
      {images.map((image) => (
        <img key={image.id} src={image.url} alt={`Image ${image.id}`} />
      ))}
    </div>
  );
};

export default ApiImageList;

Fetching images from an API is suitable when you need to display a dynamic list of images that can change over time. This method is ideal for scenarios where the image data is stored on a server or database, and you want to retrieve and display the images in your React application in real-time. It provides flexibility and scalability, allowing you to handle large amounts of image data and update the image list dynamically.