title: Send image path from node.js express server to react client
body: <p>I want to build api that store images and send them to react client app.</p>
  
  <p>The images are located in the express app in the public/images folder.</p>
  
  <p>I want to send the data obj to the client  with the image path inside.</p>
  
  <p>Express.js:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>Server:</strong> </p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p><strong>Client:</strong></p>
  
  <p>Here in the react app i want to fetch the image path and render it.</p>
  
  <pre><code>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 =&gt; {
        this.setState({
          products: response.data.products
        });
      });
    }
    render() {
      let productsList = this.state.products;
      const products = Object.keys(productsList).map((product, id) =&gt; {
        return (
          &lt;div key={id} className="product"&gt;
            &lt;img src={productsList[product].image} /&gt;
            &lt;h3&gt;{productsList[product].brand}&lt;/h3&gt;
            &lt;h3&gt;{productsList[product].price}&lt;/h3&gt;
          &lt;/div&gt;
        );
      });
      return &lt;div className="clothing-container"&gt;{products}&lt;/div&gt;;
    }
  }
  
  export default withRouter(clothing);
  </code></pre>
  
  <p>Thanks!</p>