Не требует загрузки изображений в CRA

#reactjs #typescript #require #loading-image

#reactjs #typescript #требуется #загрузка-изображение

Вопрос:

Привет

В настоящее время я пытаюсь отобразить элементы списка в react, и я не могу загружать изображения с помощью require.
Я использую CRA и не изменился webpack.config.js .

Список

 import img1 from "../../assets/work-in-progress.png";

const projects = [
    {
        id: 1,
        image_path: img1,
        title: "t1",
        category: "testing"
    },
    {
        id: 2,
        image_path: require("../../assets/work-in-progress.png"),
        title: "t2",
        category: "testing"
    },
]

Как я отображаю изображения

 <img src={ entry.image_path } alt="Project's" className="rounded" />

В настоящее время первое изображение отображается правильно, но второе не загружается.

Я уже пробовал использовать src={ "" entry.image_path } и получил тот же результат.

1. image_path: img1 это должно сработать. Пожалуйста, убедитесь, что вы загрузили свои изображения в общую папку.

2. Да, это работает. Проблема во втором элементе массива, изображение загружается не с помощью «require», а с помощью оператора import.

Ответ №1:

Я думаю, что ваш путь неверен. В моем случае это работает. Вот рабочий код

1. Да, это тоже работает с моей стороны, проблема во втором элементе массива.

2. Однако я отредактировал вашу песочницу, чтобы добавить второй элемент, поскольку я написал его локально, как вы можете видеть здесь , и, как ни странно, это сработало. Я думаю, проблема в какой-то локальной конфигурации?? Я использую CRA