Question

我正在使用React和Webpack。

我有一个React组件，它使用一个url并显示图像。

由于React在运行之前不知道图片网址，因此网络包装仍然需要＆＃39;图片网址？

import React, {Component} from 'react'

export default class Episode extends Component {

    constructor(props){
        super(props)
    }

    render(){

        let imageStyle = {backgroundImage: 'url(' + this.props.episode.url +')'}

    return (
            <div className="episode">
                    <div className="image" style={imageStyle}>
                        <h2>{this.props.episode.category}</h2>
                    </div>
                <h3>Episode {this.props.episode.number}</h3>
            </div>
        )

    }
}

作为参考，我的图片位于：

src/assets/images

我的网站正在建设dist

Answer 1

作为参考，Jumoels的答案几乎就在那里，但你不能在componentWillMount中做一个import语句。

我对此的解决方案如下：

class YourComponent extends Component {
    constructor(props){
        super(props);
        
        this.state = {
            image: ""
        };
    }

    componentWillMount(){
        this.state.image = require('../../public/assets/img/' + this.props.img);
    }

    render() {
        return(
           <img src={this.state.image}/>
        )
    }
}

Answer 2

您可以使用import()动态加载图片。然后，您可以在componentDidMount中执行以下操作：

import('path/to/images/' + this.props.episode.url).then(function(image) {
    this.setState({ image: image });
}).catch(function(err) {
    // Do something
});

在render - 功能中，您可以呈现占位符图片，例如a transparent gif，直到this.state.image包含有效内容。

render() {
    const imageSource = this.state.image
        ? this.state.image
        : "data:image/gif;base64,R0lGODlhAQABAAAAACw=";

    return <img src={imageSource} />;
}

Webpack需要React组件中的动态图像

2 个答案: