CODEWITHSUNDEEP
reactjs
bexarKnuckles
bexarKnuckles

Reputation: 25

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

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.

Upvotes: 1

Views: 65

Answers (2)

Shivam Jha
Shivam Jha

Reputation: 4472

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>
  ));
}

Upvotes: 1

Deep1man3
Deep1man3

Reputation: 192

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>
...

Upvotes: 1

Related Questions