Question

我正在尝试构建一个React图像加载器组件，它将加载使用图片的头像图像（如果有的话）。如果用户有图片，其路径将存储在数据库中。

通常这是我加载图片的方式：

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

从存储的路径到文件系统动态地反映加载映像

1 个答案: