Bild dynamisch laden aus gespeichertem Pfad in Dateisystem

Question

Ich versuche eine React Image Loader Komponente zu erstellen, die ein Avatar Bild des verwendeten Bildes lädt, falls vorhanden. Wenn der Benutzer ein Bild hat, wird sein Pfad in der Datenbank gespeichert.

Normalerweise ist dies die Art und Weise bin ich ein Bild geladen:

import img from '../../images/myimage.jpg' 

und dann:

<img alt='user' src={img} /> 

Dies funktioniert auf meinem Setup in Ordnung, und das Bild wird auf dem Bildschirm angezeigt.

Mein neuer Anwendungsfall benötigt einen Dateisystem-Pfad zu erhalten:

class Image extends Component { 

    static propTypes = { 
     fsPath: PropTypes.string, 
     alt: PropTypes.string.isRequired 

    }; 

    getImage =() => { 

     if (this.props.fsPath) 
      return <img alt={this.props.alt} src={this.props.fsPath}/>; 

     return <p>{this.props.alt}</p> 
    } 

    render() { 

      if ({}) 

      return (
       <div> 
        {this.getImage()} 
       </div> 
    } 
}; 

export default Image; 

Wenn srcPath auf die Komponente vorbei, ist es nicht das Bild zeigen (natürlich, weil es nicht ist es durch webpack „erforderlich“).

Wie kann ich meine Komponente basierend auf dem angegebenen Pfad auf meinem Dateisystem laden?

Answer 1

getImage = (props) => { 

     if (props.fsPath) 
      return <img alt={props.alt} src={props.fsPath}/>; 

     return <p>{props.alt}</p> 
    } 

    render() { 

      if ({}) 

      return (
       <div> 
        {this.getImage({...this.props})} 
       </div> 
    }