在 react 中使用 webpack 查看 img 标签中的图像将返回一个 object%20 模块

Question

我正在将图像名称(this.props.backgroundImg(作为道具传递给组件(指向"正义.jpg"(。在收件人组件中，我使用模板文字将相对路径附加到 img 标签中的 src 属性。目前为止，一切都好。

当浏览器呈现页面时，没有错误，但在网络版式浏览器工具中，我看到一个 Object%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;

Webpack url loader 配置：-

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

您正在通过 props 获取图像(它将在生产模式下运行(。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} />