保存されたパスからファイルシステムに動的に画像を読み込みます

Question

使用画像のアバター画像があれば読み込む反応画像ローダーコンポーネントを作成しようとしています。ユーザーに画像がある場合、そのパスはデータベースに保存されます。

通常、これは - 私は、イメージをロードする方法です。その後、

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

と：

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

これは私のセットアップで正常に動作し、画像が画面に表示されます。

私の新しいユースケースは、ファイルシステムのパスを受信する必要がある：

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; 

コンポーネントにsrcPathを渡すとき（それはWebPACKのを通してそれを「要求」されていないため、自然に）、それは画像が表示されません。

ファイルシステム上の指定されたパスに基づいて画像をロードするにはどうすればよいですか？

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