Reactjs 在react中使用webpack查看img标记内的图像将返回一个对象%20模块

我正在将一个图像名（this.props.backgroundImg）作为道具传递给一个组件（它指向“justice.jpg”）。在recipient组件中，我使用template literal将相对路径附加到img标记中的src属性。到目前为止还不错

当浏览器呈现页面时，没有错误，但在网络浏览器工具中，我看到的是一个对象%20模块，而不是图像文件

使用相对路径和模板字符串文字构建的文件名确实指向图像文件，因为没有404 file not found错误

请让我知道我在这里遗漏了什么，并给出正确的解释，以便更好地理解

导入文件“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;

---

您通过道具（将在生产模式下运行）获得图像。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} />

从“React”导入React；
从“../../public/assets/image1.jpg”导入image1
从“../../public/assets/image2.jpg”导入image2
从“../../public/assets/image3.jpg”导入image3
类LandingPage扩展了React.Component{
componentDidMount（）{
设置超时（（）=>{
this.props.history.push（'/pagenotfound'）；
},30000)
}
render（）{
返回(
);
}
}
导出默认登陆页面；
//用法：

您通过道具（将在生产模式下运行）获得图像。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} />

从“React”导入React；
从“../../public/assets/image1.jpg”导入image1
从“../../public/assets/image2.jpg”导入image2
从“../../public/assets/image3.jpg”导入image3
类LandingPage扩展了React.Component{
componentDidMount（）{
设置超时（（）=>{
this.props.history.push（'/pagenotfound'）；
},30000)
}
render（）{
返回(
);
}
}
导出默认登陆页面；
//用法：

我将获得很少的低分辨率图像。这就是为什么我将它们本地托管在assets文件夹中的原因。此外，我无法理解图像名称和路径何时正确，但图像仍然不是由webpack呈现的。如果您将资产注册为变量，webpack倾向于构建它们。所以，你应该将它们注册到一个对象或其他东西中，然后将它们称为道具。我会编辑我的答案，这样你可以有一个想法。谢谢分享一个工作参考。在您的代码中，image1应该从另一个组件传递，但为什么您要将image1作为图像文件导入LandingPage组件中，这将破坏传递prop的目的。这就像你正在覆盖prop变量。你可以按照你喜欢的方式做，只要你把图像引用到你的代码中。另一种方法是在css上引用它。然后webpack也会构建/处理你的图像。我会有很少的低分辨率图像。这就是为什么我将它们本地托管在assets文件夹中的原因。此外，我无法理解图像名称和路径何时正确，但图像仍然不是由webpack呈现的。如果您将资产注册为变量，webpack倾向于构建它们。所以，你应该将它们注册到一个对象或其他东西中，然后将它们称为道具。我会编辑我的答案，这样你可以有一个想法。谢谢分享一个工作参考。在您的代码中，image1应该从另一个组件传递，但为什么您要将image1作为图像文件导入LandingPage组件中，这将破坏传递prop的目的。这就像你正在覆盖prop变量。你可以按照你喜欢的方式做，只要你把图像引用到你的代码中。另一种方法是在css上引用它。然后webpack也将构建/处理您的图像。