Реагируйте: как загрузить изображение вне папок sr c и publi c

Question

Мой проект с такой структурой:

├── api
├── db
│   └── images
├── ui
│   └── public
│   └── src
│   |    └── App.js

Мое приложение было создано с использованием create-Reaction-app, поэтому я не могу импортировать файлы вне каталога sr c, и я не хочу эти изображения должны быть в папке publi c: как мне получить тег img:

<img src="db/images/img_1.jpg">

с sr c для получения изображений в папке db / images, полностью вне приложения реакции?

Спасибо за ваши ответы

Answer 1

Если вы просто не хотите, чтобы он перезагружался при загрузке файла, вы можете игнорировать папку, в которую вы загружаете файлы, в вашей конфигурации webpack

devServer: {
    ...
    watchOptions: {
        ignored: './src/images/**/.*',
    },
    ...
}

Answer 2

Пакет create-реагировать-приложение использует плагин для Webpack под названием ModuleScopePlugin, который вызывает такое поведение

Вы можете использовать пакет customize-cra для переопределения конфигураций веб-пакета.

У customize-cra есть метод решения вашей проблемы.

removeModuleScopePlugin

или вы можете извлечь из create-реагировать-приложение и удалить этот конфиг вручную в пачке

Answer 3

Другой вариант - поместить изображение внутри вашего src и ссылаться на него в реакции. Рассмотрим следующее:

├── ui
│   └── public
│   └── src
│   |    └── App.js
         └── img_1.jpg

app. js

import img from "./img_1.jpg";

затем в вашем рендере img tag

<img src={img} />

Надеетесь, что это сработает для вас? iir c это предотвратит горячую загрузку изображения из вашей папки publi c.

Если существует буквально 0 способов перемещения изображений в ваш реактивный проект, я могу думать только о том, чтобы загрузить изображения где-то и ссылки на них из буквальной ссылки, например, S3