在ReactJS上显示图像

Question

我正在构建一个应用程序来在我的React页面上显示图像。 图像已上载到本地文件夹。 我将我的React应用程序与NodeJS服务器和MongoDB相结合。

我想显示保存在文件夹中的所有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;

Answer 1

您需要要求图像在img标签中使用它。 像这样使用它 -

<img src={require(library.path)} />