How to import images into initialState array of objects, then map through it to be displayed?

Question

I am building an app that allows the user to enter some information about an album. It then displays that information in a card format.

I have some local images in an assets folder in my src directory.

How do I import the images into the objects...

import React, { createContext, useReducer } from 'react';
import appReducer from './AppReducer';

const initialState = {
  albums: [
    {
      id: 1,
      // cover: 'HOW DO I INSERT AN IMAGE HERE...',
      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },...
  ]
};

export const GlobalContext = createContext(initialState);

...then display them in the initialState album list?

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';

import { GlobalContext } from '../context/GlobalState';

export const AlbumList = () => {
  const { albums, removeAlbum } = useContext(GlobalContext);
  return (
    <React.Fragment>
      {albums.length > 0 ? (
        <React.Fragment>
          {albums.map((album) => (
            <div class="bg-white shadow p-3 m-3 rounded lg:w-64">
              <div>
                <img src="...AND USE IT HERE TO BE DISPLAYED" alt="album cover"></img>
              </div>

              <div class="mt-6">
                <p class="text-lg text-bold tracking-wide text-gray-600 mb-2">
                  {album.name}
                </p>

The name,artist, and yearare displayed, but I can not get the images to display. I have tried this and this, among other solutions, but I can't figure it out.

I'm just learning, so if more context or info is needed please let me know.

score 1 · Accepted Answer · answered Jul 12 '21 at 06:08

1

You need import images as components! Create folder with assets images and import to GlobalContext:

import PurpleRain from './assets/purple_rain.jpg';

and add to initial state:

const initialState = {
  albums: [
    {
      id: 1,

      cover: PurpleRain

      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },...
  ]
};

and use:

...
<div>
  <img src={album.cover} alt="album cover"></img>
</div>
...

answered Jul 12 '21 at 06:08

Deep1man3

192
3

You know what, I had already tried this, but for some reason I was putting braces when adding it to initial state `{ PurpleRain }` Thank you! – bexarKnuckles Jul 12 '21 at 15:15
What if we have 100 or more elements in the albums array, do we also import 100 or more assets ? Yes we can but don't you think it will add up more lines of import code. – Subrato Pattanaik Jul 13 '21 at 03:19

score 1 · Answer 2 · answered Jul 12 '21 at 06:12

const initialState = {
  albums: [
    {
      id: 1,
      // add a key for your img src here,
      src: '....',
      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },

    /*
     * Rest of objects
     * .
     * .
     */
  ],
};

// Then use map like this:
{
  albums.map(album => (
    <div class='bg-white shadow p-3 m-3 rounded lg:w-64'>
      <div>
        {/* Pull out src from current iteration (`album`) */}
        <img src={album.src} alt='album cover'></img>
      </div>

      <div class='mt-6'>
        <p class='text-lg text-bold tracking-wide text-gray-600 mb-2'>
          {album.name}
        </p>{' '}
      </div>
    </div>
  ));
}

How to import images into initialState array of objects, then map through it to be displayed?

2 Answers2