将存储路径动态加载图像到文件系统

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