title: Load images based on dynamic path in ReactJs
body: <p>I'm trying to display images in a shopping cart i'm making but its not showing up. Do i have to import each image? I know my paths are fine because it worked before.I think there might be something wrong in my product.js file but I can't figure it out.</p>
  <p>Here is my Product.js</p>
  <pre><code>import React, { Component, PropTypes } from 'react';
  
  class Product extends Component {
      handleClick = () =&gt; {
          const { id, addToCart, removeFromCart, isInCart } = this.props;
  
          if (isInCart) {
              removeFromCart(id);
          } else {
              addToCart(id);
          }
      }
  
      render() {
          const { name, price, currency, image, url, isInCart } = this.props;
  
          return (
              &lt;div className=&quot;product thumbnail&quot;&gt;
                  &lt;img src={image} alt=&quot;product&quot; /&gt;
                  &lt;div className=&quot;caption&quot;&gt;
                      &lt;h3&gt;
                          &lt;a href={url}&gt;{name}&lt;/a&gt;
                      &lt;/h3&gt;
                      &lt;div className=&quot;product__price&quot;&gt;{price} {currency}&lt;/div&gt;
                      &lt;div className=&quot;product__button-wrap&quot;&gt;
                          &lt;button
                              className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                              onClick={this.handleClick}&gt;
                              {isInCart ? 'Remove' : 'Add to cart'}
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  Product.propTypes = {
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      price: PropTypes.number,
      currency: PropTypes.string,
      image: PropTypes.string,
      url: PropTypes.string,
      isInCart: PropTypes.bool.isRequired,
      addToCart: PropTypes.func.isRequired,
      removeFromCart: PropTypes.func.isRequired,
  }
  
  export default Product;
  </code></pre>
  <p>The data comes from this product.js</p>
  <pre><code>const data = [
      {
          id: 1,
          name: 'Reggae Blaster',
          price: 10,
          currency: 'GOLD',
          image: '../assets/blaster_1.png'
      },
      {
          id: 2,
          name: 'Juicy Blaster',
          price: 10,
          currency: 'GOLD',
          image: 'images/02.jpg'
      },
      {
          id: 4,
          name: 'Full Body Reggae Armor',
          price: 20,
          currency: 'GOLD',
          image: 'images/04.jpg'
      },
      {
          id: 6,
          name: 'Reggae Spikes Left',
          price: 5,
          currency: 'GOLD',
          image: 'images/06.jpg'
      },
      {
          id: 5,
          name: 'Reggae Spikes Right',
          price: 5,
          currency: 'GOLD',
          image: 'images/05.jpg'
      },
      {
          id: 3,
          name: 'Black Full Body Reggae Armor',
          price: 20,
          currency: 'GOLD',
          image: 'images/03.jpg'
      }
  ];
  
  export default data;
  
  </code></pre>
  <p>I am pulling all the data except the images just don't show up</p>