Показать изображения <img src = 'path' /> в React, есть некоторые проблемы

Question

Я создаю шаблонную полосу в React, и мне нужно показать много локальных фиктивных изображений .

Внутри моего <Main /> компонента я импортирую другие компоненты, которые передают путь изображения в качестве параметра, например так:

  <Container
    type="image"
    source=...
    message=""
    link="" />

Поскольку я искал и читал разные ответы, пока в React мы не можем просто использовать <img src="relative image path" />, я не знаю точно, в чем проблема, кеширование / рендеринг и т. Д.

Что я уже сделал для того, чтобы загрузить изображения на страницу:
1. Сначала импортируем их сверху: import img1 from '../assets/img/hd1080.png'
2. Передайте изображение компоненту так:

<Container
    type="image"
    source={img1}
    message=""
    link="" />

3. Внутри я передаю его IMG примерно так: <img src={img1} />

Просто интересно, есть ли более быстрый способ, при котором не нужно сначала импортировать изображения, а затем использовать их, src="relative path"

Answer 1

Если вы имеете дело с несколькими файлами, то я бы предложил вам создать отдельный файл и импортировать все ваши изображения. Для опыта:

module.exports = {
    Slider_Arrow_Icon: {
       back_Arrow_Icon: require('../images/arrow-slide-back')
    }

}

А затем импортируйте этот файл, и вы можете легко использовать. Если любой запрос lmk.

Надеюсь, что это окажется полезным.

Answer 2

В React вы также можете использовать относительный путь изображения.

Однако, учитывая ваш вопрос, у вас, вероятно, есть Webpack, компилирующий и связывающий ваши активы. «The Webpack Way» предпочитает, чтобы Webpack компилировал все. Это имеет некоторые достоинства, такие как возможность оптимизировать и встроенные изображения через плагины Webpack.

Другим подходом было бы скомпилировать ваш JS & CSS с помощью Webpack, но скопировать изображения как есть в «скомпилированную папку».

Сервер разработки Webpack позволяет вам делать это, если вы хотите, а иногда это проще и имеет больше смысла, чем файлы JS, импортирующие изображения.

Если ваша единственная цель - простота, то импортировать проще - вам не нужен другой сценарий «копировщик файлов» для компиляции файлов, а Webpack может сжимать или вставлять ваши изображения.

Однако, если управление каждым изображением становится утомительным, рассмотрите возможность создания простого правила копирования файлов (например, с Makefiles), копирования файлов в папку dist и простого написания <Container source="/images/x.png">.