将图像从mongoDB导入react

Question

我正在尝试在我的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())
}

];

react页面，包括整个类、状态和正在呈现的内容。正在尝试将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，但不显示图像本身。

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

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