@dmitriu256

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

Почему не подключается 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 метод - ошибок нет - как и самого изображения
Структура проекта5fabca97710a9198154412.png

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

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

5fabcaa031dfb575374795.png

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 каталога
  • Вопрос задан
  • 571 просмотр
Решения вопроса 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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы