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

【问题标题】：Webpack require dynamic image in a React componentWebpack 需要 React 组件中的动态图像
【发布时间】：2016-01-04 15:34:40
【问题描述】：

我正在使用带有 Webpack 的 React。

我有一个 React 组件，它接受一个作为 url 的 prop 并显示图像。

由于 React 直到运行时才知道图像 url，所以 webpack 仍然可以“要求”图像 url 吗？

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

我的 webpack 正在构建到 dist

【问题讨论】：

那个url base64数据是我拿的吗？如果是这样，那么重要的部分是您在哪里加载该数据，以及您为它使用的 webpack 加载器
@DominicTobias 它不是基于 64 位的数据。我通过轮询我的服务器来获取数据，以找出与用户当前正在查看的特定剧集相关的图像 url
这可能会有所帮助。 stackoverflow.com/questions/29421409/…

标签： image reactjs webpack

【解决方案1】：

作为参考，Jumoels 的答案几乎就在那里，但您不能在 componentWillMount 中执行导入语句。

我的解决方案如下：

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}/>
        )
    }
}

【讨论】：

【解决方案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} />;
}

【讨论】：