將存儲路徑動態加載圖像到文件系統

Question

我試圖構建一個React圖像加載器組件，該組件會加載使用圖片的頭像圖像（如果有的話）。如果用戶有圖片，其路徑將被存儲在數據庫中。

通常這是I'm方式加載圖像：

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