如何将图像导入initialState对象数组，然后映射到其中进行显示

Question

我正在构建一个应用程序，允许用户输入有关相册的一些信息。然后，它以卡片格式显示该信息。

我的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，但我无法获得要显示的图像。我试过这个和这个，以及其他解决方案，但我想不通。

我只是在学习，所以如果需要更多的背景或信息，请告诉我。

Answer 1

您需要导入图像作为组件！创建包含资产图像的文件夹并导入到GlobalContext:

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

并添加到初始状态：

const initialState = {
albums: [
{
id: 1,
cover: PurpleRain
name: 'Purple Rain',
artist: 'Prince',
year: '1984',
genre: 'Pop',
},...
]
};

和用途：

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

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