从React中的另一个文件导入图像

Question

我正在使用create-react-app构建一个简单的网页：

index.js：

import lostImage from './assets/img/illustrations/lost.svg';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}

它可以按预期工作，但是我计划导入数十个图像，因此我决定将import调用移动到同一目录中的单独文件中：

images.js：

import lostImage from './assets/img/illustrations/lost.svg';

index.js：

import './images.js';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}

但是我收到lostImage not defined错误。我该如何正确地做到这一点？

Answer 1

您需要从images.js文件中导出它们。然后将它们导入到index.js文件中使用。

images.js：

import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };

index.js：

import {lostImage} from './images.js';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}