1

I'm new to React and am trying to work on a practice project that will help me get better at the library. Right now, I'm trying to take a folder of images that contain 10 images and import them into my App.js file. This is the file that is being rendered to my HTML document. What I want to do is import these files (preferably into some sort of array), and make each of those array indices a variable in an object that is stored in state. I'll include my code and try to explain even further.

Here is a segment of my App.js:

import React, { Component } from 'react';
import './App.css';
import AlbumCard from './AlbumCard/AlbumCard';
import AlbumImages from AlbumImages;

class App extends React.Component {

  state = {
    albumArt: [
      {title: "Supermodel", image: "AlbumImages/1.jpg"},
      {title: "A Moment Apart", image: 'AlbumImages/2.jpg'},
      {title: "Beerbongs and Bentleys", image: 'AlbumImages/3.jpg'},
      {title: "Another Eternity", image: 'AlbumImages/4.jpg'},
      {title: "Astroworld", image: 'AlbumImages/5.jpg'},
      {title: "The Story of Us", image: 'AlbumImages/6.jpg'},
      {title: "Slow Motion", image: 'AlbumImages/7.jpg'},
      {title: "Free Spirit", image: 'AlbumImages/8.jpg'},
      {title: "Birds in the Traps Sing McKnight", image: 'AlbumImages/9.jpg'},
      {title: "At. Long. Last. A$ap", image: 'AlbumImages/10.jpg'}
    ],

      i: 0,
      x: 0,
      y: 0,
      z: 0
  }

I want to import the folder AlbumImages, which consists of 10 images, and place each respective image into the state.albumArt.image variables. Is there anyway someone could help me solve this problem? Any help would be greatly appreciated. Thanks!

Laurel Link
  • 195
  • 1
  • 4
  • 15
  • Possible duplicate of [Dynamically import images from a directory using webpack](https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack) – Agney Sep 16 '19 at 19:23

1 Answers1

0

It is possible import each of images separately like this import image1 from ./AlbumImages /1.jpg; import image2 from ./AlbumImages/2.jpg and then use image1 as value of src attribute like this <img src={image1} />. For examle, you can add a property src to each object of array.

bgd
  • 1