Просмотр изображения внутри тега img с помощью веб-пакета в ответ возвращает объектный модуль% 20

Question

Я передаю имя изображения (this.props.backgroundImg) в качестве опоры для компонента (который указывает на "правосудие.jpg"). В компоненте получателя я добавляю относительный путь с использованием литерала шаблона к атрибуту sr c в теге img. Пока все хорошо.

Когда страница отображается браузером, ошибки нет, но в инструменте браузера Network chrome я вижу объект% 20module вместо файла изображения.

Имя файла, созданное с использованием относительного пути и строкового литерала шаблона, указывает на файл изображения, так как нет ошибки 404 файл не найден.

Пожалуйста, дайте мне знать, что мне здесь не хватает, с правильным объяснением для лучшего понимания?

Изображение отображается в браузере, когда я импортирую файл "landingPageBkg"

Код компонента следующий.

import React from 'react';
//import landingPageBkg from '../../../public/assets/justice.jpg'


class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },30000)
    }



  render() {
    console.log(typeof `../../../public/assets/${this.props.backgroundImg}`)
    return (
      <div className="landingPageImg">
      <img src={require(`../../../public/assets/${this.props.backgroundImg}`)} className="landingPageImg"/>    
        </div>
    );
  }
}

export default LandingPage;

Конфигурация загрузчика URL Webpack: -

    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {
                test: /\.s?css$/,
                use: ['style-loader',
                'css-loader', 'sass-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|jpg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader',
            },

        ],

Answer 1

Вы получаете изображение через реквизит (который будет работать в производственном режиме). Webpack не имеет представления о том, что произойдет после сборки (поэтому он не сможет определить имя / фрагмент изображения, которое вы получаете). Вам лучше разместить эти изображения в другом месте, а затем получить их ссылку через реквизит.

import React from 'react';
import image1 from '../../../public/assets/image1.jpg'
import image2 from '../../../public/assets/image2.jpg'
import image3 from '../../../public/assets/image3.jpg'





class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },30000)
    }



  render() {

    return (
      <div className="landingPageImg">
      <img src={this.props.backgroundImage} className="landingPageImg"/>    
        </div>
    );
  }
}

export default LandingPage;


// usage: 


<LandingPage backgrounImage={image1} />