從mongoDB得到一個圖像反應

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

]; 

反應頁，包括與國家整個班級，什麼是被渲染。試圖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> 
    ) 
} 

，但我希望你能真正完整的URL，而不是../client/src/images/house4.jpg？ :)