Webpack bir React bileşeninde dinamik görüntü gerektirir.

Question

Webpack ile React kullanıyorum.

Bir url olan ve görüntüyü gösteren bir prop alan bir React Component'im var.

React, çalışma zamanına kadar url görüntüsünü bilmeyeceğinden, webpack hala görüntü URL'sini 'gerektirebilir' mi? Başvuru için

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

    } 
} 

, benim görüntüleri yer almaktadır:

src/assets/images

ve benim webpack dinamik görüntüleri yüklemek için import() kullanabilirsiniz dist

Answer 1

için inşa ediyor. Ardından, componentDidMount aşağıdaki gibi bir şey yapabilirsiniz: senin render yılında

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

this.state.image geçerli bir şeyi içeriyor kadar sonra, örneğin a transparent gif için, bir yer tutucu resmi hale getirebilir taşımasının avantajlı.

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

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

Answer 2

Referans için, Jumoels yanıtı hemen hemen oradaydı, ancak bir componentWillMount içinde bir import deyimi yapamazsınız.

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