Webpack richiede un'immagine dinamica in un componente React

Question

Sto usando React con Webpack.

Ho una componente React che accetta un puntello che è un URL e visualizza l'immagine.

Poiché React non conoscerà l'URL dell'immagine fino al runtime, il webpack può ancora richiedere l'URL dell'immagine?

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

    } 
} 

Per riferimento, le mie immagini si trovano in:

src/assets/images

e la mia webpack sta costruendo a dist

Answer 1

È possibile utilizzare import() per caricare le immagini in modo dinamico. Quindi, si può fare qualcosa di simile a quanto segue in componentDidMount:

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

Nella tua render -funzione è quindi possibile rendere un'immagine segnaposto, per esempio a transparent gif, fino this.state.image contiene qualcosa di valido.

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

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

Answer 2

Per riferimento, Jumoels risposta era quasi lì, ma non si può fare una dichiarazione di importazione all'interno di un componentWillMount.

mia soluzione a questo è stato il seguente:

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