Почему не подключается img через require?

Question

[dmitriu256]

Почему не подключается img через require?
Изображения хранятся в папке src/shared/img

Использовал четыре метода подключения изображения:

//1 метод
import myImg from './main-img.png';

//2 метод - не работает
//const myImg = require('./main-img.png');

export default class Main extends React.Component{
    render() {
        return (
            <section className="main dark-bg" id="main">
                <div className="container">
                    <div className="row">
                        <div className="col-12 col-md-12 col-lg-5 hidden-mobile hidden-sm hidden-md">
                            <div className="main-img wow zoomIn" data-wow-duration="2s" data-wow-delay="0.1">
                                {/*<img src={myImg} alt="Main Box"/>*/}

                                {/*3 метод*/}
                                <img src={require('./main-img.png')} alt="Main Box"/>

 {/*4 метод*/}
                                <img src="./main-img.png" alt="Main Box"/>

                            </div>
                            {/* /.main-img */}
/// остальной программный  код

Когда подключаю картинку через import все отлично срабатывает
Почему не работает 2 и 3 метод - ошибок нет - как и самого изображения
Структура проекта

Метод require необходим в дальнейшем - для того чтобы из state главного компонента передать путь для дочернего компонента

<img src={require(props.src)} alt="Main Box"/>



2- Отдельный Логический подход
Если все изображения изначально хранить в папке public/img
В JSX
<img src="/img/main/main-img.png" alt="Main Box"/>

Отображается как нужно, а если задавать фон секции через SASS вида

.main
  padding-top: 65px
  padding-bottom: 78px
  color: $text-color-light
  background: $text-color-dark url("/img/main/main-bg.jpg") center 0 no-repeat

Получу ошибку - что нельзя выходить за пределы src каталога

Comments

[dmitriu256]

Когда задаю путь к изображению в файле Main.sass получаю ошибку

./src/components/Main/Main.sass (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/components/Main/Main.sass)
Error: Can't resolve './img/main/main-bg.jpg' in 'C:\Verstka2019\Повтор React-October-2020\Сайты на реакт для портфолио\cardboard-full\src\components\Main'

Что это значит?

Answer 1

[twolegs]

Подобное решение не очень удачно, так как вебпак не знает какие ресурсы необходимо скопировать (вы их импортируете динамически).
Возможное решение:
Импортировать все необходимые изображения. Далее вы можете создать словарь, и в коде использовать значения из словаря.

import Img1 from './img1.png';
import Img2 from './img1.png';
import Img3 from './img1.png';

export const images = { Img1, Img2: Img3 }

И при использовании:

import { images } from 'assets.js';

<ImgComponent src={images.Img1} />

Лоадер вебпака преобразует файлы изображений в относительные пути, так не нужно бояться статических импортов этих файлов. Фактически ресурс загрузится только когда этот путь попадет в src.

Comments

[twolegs]

Да и без словаря это тоже можно делать. Просто импортируете изображение там, где это надо и пробрасывайте куда надо.
Работайте с этой переменной так, будто это простая строка с путем (фактически это так и есть).

[dmitriu256]

twolegs, а если использовать второй подход - когда изображения хранятся в public/img?
Проблему с задание фона у секции через sass решил следующим образом - поместил фон в корень папки компонента Main/main-bg.png

.main
  padding-top: 65px
  padding-bottom: 78px
  color: $text-color-light
  background: $text-color-dark url('./main-bg.jpg') center 0 no-repeat
  background-size: cover

Или все же модель, где все изображения вынесены в public - не очень хорошее решение и лучше хранить в src/shared/img?

по поводу импорта понял, спасибо

[twolegs]

Я так понимаю, вы используете Create React App.
Здесь, в общем-то, все описано: https://create-react-app.dev/docs/using-the-public...
Общая рекомендация и философия CRA - ассеты должны находиться рядом с кодом.