通过 React 组件中的 props 传递从动态构建的 `require` URL 加载的图像

Question

所以我正在 React 中构建一个简单的餐厅应用程序，并有一系列

.jpg

图像。在我的

Specials.jsx

组件中，我构建了一个对象数组，其属性包括

image

。然后，我映射该数组以渲染每个对象的

<Special />

（不是

Specials

）元素。我首先尝试使用动态图像路径，这样我就不必手动导入所有文件，但这不起作用。我

require

调整了路径，以确保它们按预期构建并与图像位置相匹配（它们确实是这样）。但图像没有被加载，所以我

console.log

编辑了第一个图像来测试它，并将其别名放在数组的

import

属性中。这仍然没有加载图像。然后，我将图像直接

image

编辑到

import

模块中，并且工作正常，但由于我渲染它的方式，导致图像占据了渲染数组中的每个点。我只是不确定发生了什么事，以及以这种方式处理图像是否存在问题。对于上下文，我使用

Special.jsx

启动了我的应用程序（我无法更改它，因为这是一项需要特定开发流程的作业）。这是我的

create-react-app

模块：

Specials.jsx

这是我的

const Specials = () => {
    return (
        <main className={styles.layout}>
            {specials.map(special => {
                return <Special key={special.title} data={special} />
            })}
        </main>
    );
};

export default Specials;

模块：

Special.jsx

假设我的数组是这样的：

const Special = ({ data }) => {
    return (
        <article className={styles.article}>
            <img src={data.img} alt={data.title} />
            <h2>{data.title}</h2>
            <p>{data.desc}</p>
            <p>{data.price}</p>
        </article>
    );
};

export default Special;

我首先加载了一个名为 

const specials = [
    {
        title: 'Campanelle',
        desc: 'Fresh campanelle pasta tossed in pesto alla genovese and topped with roasted pine nuts and fried kale.',
        price: '$31',
        image: // Depends on how I load them
    }
};

的图像，如下所示（不起作用）：

Campanelle-min.jpg

然后这样（还是不行）：

// Specials.jsx
const getImagePath = (imageName) => {
    return require(`../../assets/images/postcompress/${imageName}-min.jpg`);
};
const specials = [
    {
        title: 'Campanelle',
        desc: 'Fresh campanelle pasta tossed in pesto alla genovese and topped with roasted pine nuts and fried kale.',
        price: '$31',
        image: getImagePath('Campanelle')
    }
};

然后我以相同的方式将其加载到

// Specials.jsx
import Campanelle from '../../assets/images/postcompress/Campanelle-min.jpg';

const specials = [
    {
        title: 'Campanelle',
        desc: 'Fresh campanelle pasta tossed in pesto alla genovese and topped with roasted pine nuts and fried kale.',
        price: '$31',
        image: Campanelle
    }
};

（现在可以工作，但不允许我将所有图像导入到每个不同的渲染中

Special.jsx

）：<Special />

Answer 1

import Campanelle from '../../assets/images/postcompress/Campanelle-min.jpg';

const Special = ({ data }) => {
    return (
        <article className={styles.article}>
            <img src={Campanelle} alt={data.title} />
            <h2>{data.title}</h2>
            <p>{data.desc}</p>
            <p>{data.price}</p>
        </article>
    );
};

export default Special;

图像路径或名称将使用已定义名称的数组或您感觉良好的数组进行变量映射。