在ReactJS上顯示圖像

我正在構建一個應用程序以在我的React頁面上顯示圖像。圖像已上傳到本地文件夾。我將我的React應用程序與NodeJS服務器和MongoDB結合在一起。在ReactJS上顯示圖像

我想顯示保存在文件夾中的所有img。我一直在嘗試使用該文件的路徑，但我不認爲它適用於img標記。

任何人都可以幫助澄清？

class showAllPhotos extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     library: [] 
    } 
    } 

    componentDidMount() { 
    axios.get('/all') 
    .then((response) => { 
     let arr = response.data; 
     console.log('arr', arr); 
     this.setState({ 
     library: arr 
     }); 
     console.log("response data", arr); 
     console.log('library it worked', response.status); // ex: 200 
    }) 
    .catch(function (error) { 
     console.log(error); 
     console.log('error getting library', error.status); 
    }); 

    } 

    render() { 

     let renderLibrary =() => { 
     return(
      <div> 
      {this.state.library.map(function(library) { 
       return(
       <div className="row" > 
        <div className="col-xs-6 col-md-6" id='card'> 
        <img src={library.path} alt='some text'/> 
        </div> 
       </div> 
      ); 
      })} 
      </div> 
     ) 
     } 

    return (
     <div className="Container"> 
     <div> 
     {renderLibrary()} 
     </div> 
     </div> 
    ); 
    } 
} 

export default showAllPhotos;

，這裏是我的後臺路徑 - 在Postmate檢查，它的確定。

var express = require('express'); 
var router = express.Router(); 

var Photo = require('../model/photo'); 

router.get('/', function(req, res, next){ 
    Photo.find({}, function(err, photos){ 
    if(err){ 
     res.json({error:err}); 
    } 
    res.json(photos); 
    }); 
}); 

module.exports = router;

來源

2017-08-18 kahong