मैं एक ऐप बना रहा हूं जो उपयोगकर्ता को किसी एल्बम के बारे में कुछ जानकारी दर्ज करने की अनुमति देता है। यह तब उस जानकारी को कार्ड प्रारूप में प्रदर्शित करता है।

मेरे पास मेरी src निर्देशिका में संपत्ति फ़ोल्डर में कुछ स्थानीय छवियां हैं।

मैं वस्तुओं में छवियों को कैसे आयात करूं ...

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

...फिर उन्हें initialState एल्बम सूची में प्रदर्शित करें?

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>

name,artist, और year प्रदर्शित होते हैं, लेकिन मैं छवियों को प्रदर्शित नहीं कर सकता। मैंने कोशिश की है यह और यह, अन्य समाधानों के साथ, लेकिन मैं इसका पता नहीं लगा सकता।

मैं अभी सीख रहा हूं, इसलिए यदि अधिक संदर्भ या जानकारी की आवश्यकता है तो कृपया मुझे बताएं।

1
bexarKnuckles 12 जुलाई 2021, 08:58

2 जवाब

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>
  ));
}
1
Shivam Jha 12 जुलाई 2021, 06:12

एल्बम सरणी के प्रत्येक ऑब्जेक्ट में छवि URL स्ट्रिंग जोड़ें। URL एप्लिकेशन की मूल निर्देशिका से संबंधित होना चाहिए।

const initialState = {
  albums: [
    {
      id: 1,
      imgURL: '/images/anyImages.jpeg',
      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },...
  ]
};

अब हम इमेज यूआरएल को इस तरह मैप कर सकते हैं।

<div>
   <img src={album.imgUR} alt="album cover"></img>
</div>
0
Subrato Patnaik 12 जुलाई 2021, 06:20