Импортировать изображения из другого файла в 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} />
    );
}