从 Node.js Express 服务器发送图像路径到 React 客户端

Question

我想构建存储图像并将它们发送到反应客户端应用程序的 api。

这些图像位于 Express 应用程序的 public/images 文件夹中。

我想将数据 obj 发送到客户端，其中包含图像路径。

Express.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cors = require('cors');

var index = require('./routes/index');
var users = require('./routes/users');
var login = require('./routes/login');
var signup = require('./routes/signup');
var clothing = require('./routes/clothing');

var app = express();
app.use(cors());
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/login', login);
app.use('/signup', signup);
app.use('/clothing', clothing);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

服务器：

const data = {
  products: [
    {
      id: 1,
      type: 'jeans',
      price: 100,
      brand: 'Levis',
      size: ['s', 'm', 'l'],
      color: 'Black',
      image: '/images/levis.png'
    },
    {
      id: 2,
      type: 'shirt',
      price: 150,
      brand: 'Tommy Hilfiger',
      size: ['s', 'm', 'l', 'xl'],
      color: 'White',
      image: '/images/tommy.png'
    },
    {
      id: 3,
      type: 'T-shirt',
      price: 30,
      brand: 'Levis',
      size: ['s', 'm', 'l'],
      color: 'Black',
      image: '/images/polo.png'
    }
  ]
};

router.get('/', function(req, res, next) {
  res.send(data);
});

客户：

在反应应用程序中，我想获取图像路径并渲染它。

import React, { Component } from 'react';
import { withRouter, Link, Route } from 'react-router-dom';
import Shoes from './../Shoes/Shoes';
import axios from 'axios';
class clothing extends Component {
  state = {
    products: []
  };
  componentDidMount() {
    axios({
      method: 'get',
      url: 'http://localhost:3001/clothing'
    }).then(response => {
      this.setState({
        products: response.data.products
      });
    });
  }
  render() {
    let productsList = this.state.products;
    const products = Object.keys(productsList).map((product, id) => {
      return (
        <div key={id} className="product">
          <img src={productsList[product].image} />
          <h3>{productsList[product].brand}</h3>
          <h3>{productsList[product].price}</h3>
        </div>
      );
    });
    return <div className="clothing-container">{products}</div>;
  }
}

export default withRouter(clothing);

谢谢！

Answer 1

您在这里并没有真正提供太多代码，但从我收集的信息来看，您已经在目录中获得了图像public/images，然后您将图像路径发送回客户端，并且您希望客户端能够提取图像。

由此我假设您想要的是 Express 服务器静态功能。这将允许您提供public/images目录中的静态内容。

该文档将向您展示如何设置提供静态文件，然后您的前端显示图像应该没有问题。