从 mongoDB 获取图像做出反应答案

【问题标题】：getting an image into react from mongoDB从 mongoDB 获取图像做出反应
【发布时间】：2017-10-06 12:41:56
【问题描述】：

我正在尝试将图像源链接播种到我的 mongoDB 中，然后将其拉入我的状态，然后尝试加载图像。下面是我的种子和我的反应页面我正在加载它。

数据库种子：

const houseSeed = [
{
name: "Scenic View",
address: "123 internet st",
imagesrc: "../client/src/images/house5.jpg",
about:
  'This houses biggest selling point is the view from the wall size windows 
put along the entire length off the house.',
date: new Date(Date.now())
},
{
name: "Modern Style",
address: "123 internet st",
imagesrc: "../client/src/images/house4.jpg",
about:
  'This houses biggest selling point is the very modern approach to the 
architecture of the home and the sleek clean lines it contains.',
date: new Date(Date.now())
}

];

反应页面，包括整个类的状态和正在呈现的内容。试图将 state.source 加载到：

class About extends Component {
state = {
    house: {},
    source: ""
};
componentDidMount() {
    API.getHouse(this.props.match.params.id)
        .then(res => this.setState({ house: res.data, source: res.data.imagesrc}))
        .then(console.log("state source" + this.state.source))
        .catch(err => console.log(err));

    console.log("state source" + this.state.source);
}

imageFunct =() => {
    return <img src={this.state.source} alt='image of house' />;
}

render(){
    return(
        <Container fluid>
            <Row>
                <Col size="md-12">
                    <Header />
                    <Nav />
                </Col>
            </Row>
         <Row>
                <Col size="md-3">
                </Col>
                <Col size="md-6">
                    <Row>
                        <Col size="md-12">
                            <h1>{this.state.house.name}</h1>
                        </Col>
                    </Row>
                    <Row>
                        <Col size="md-3" />
                        <Col size="md-6">
                            {this.imageFunct()}
                        </Col>
                        <Col size="md-3" />
                    </Row>
                    <Row>
                        <Col size="md-12">
                            <h4>{this.state.house.about}</h4>
                        </Col>
                    </Row>
                </Col>
                <Col size="md-3">
                </Col>
            </Row>

        </Container>
    )
}

它将显示图像 alt 但不显示图像本身。

【问题讨论】：

因为imageFunct不会重新渲染，试着把<img src={this.state.source} alt='image of house' />部分像house.about一样放在模板里面

标签： node.js mongodb reactjs express

【解决方案1】：

这应该可行：

class About extends Component {
state = {
    house: {},
    source: ""
};
componentDidMount() {
    API.getHouse(this.props.match.params.id)
        .then(res => this.setState({ house: res.data, source: res.data.imagesrc}))
        .then(console.log("state source" + this.state.source))
        .catch(err => console.log(err));

    console.log("state source" + this.state.source);
}

render(){
    return(
        <Container fluid>
            <Row>
                <Col size="md-12">
                    <Header />
                    <Nav />
                </Col>
            </Row>
         <Row>
                <Col size="md-3">
                </Col>
                <Col size="md-6">
                    <Row>
                        <Col size="md-12">
                            <h1>{this.state.house.name}</h1>
                        </Col>
                    </Row>
                    <Row>
                        <Col size="md-3" />
                        <Col size="md-6">
                            <img src={this.state.source} alt='image of house' />
                        </Col>
                        <Col size="md-3" />
                    </Row>
                    <Row>
                        <Col size="md-12">
                            <h4>{this.state.house.about}</h4>
                        </Col>
                    </Row>
                </Col>
                <Col size="md-3">
                </Col>
            </Row>

        </Container>
    )
}

但我希望你得到完整的 URL 而不是 ../client/src/images/house4.jpg ？ :)

【讨论】：