Load images based on dynamic path in ReactJs

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.

Here is my Product.js

import React, { Component, PropTypes } from 'react';

class Product extends Component {
    handleClick = () => {
        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 (
            <div className="product thumbnail">
                <img src={image} alt="product" />
                <div className="caption">
                    <h3>
                        <a href={url}>{name}</a>
                    </h3>
                    <div className="product__price">{price} {currency}</div>
                    <div className="product__button-wrap">
                        <button
                            className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                            onClick={this.handleClick}>
                            {isInCart ? 'Remove' : 'Add to cart'}
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

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;

The data comes from this product.js

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;

I am pulling all the data except the images just don’t show up

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Assuming that you are using webpack, you need to import the image in order to display it like

<img src={require('images/06.jpg')} alt="product" />

Now that your image data is dynamic,
directly specifying the import path like

<img src={require(image)} alt="product" />

doesn’t work.

However you can import the image by making use of template literals like

<img src={require(`${image}`)} alt="product" />

So your code will look like

render() {
    const { name, price, currency, image, url, isInCart } = this.props;

    return (
        <div className="product thumbnail">
            <img src={require(`${image}`)} alt="product" />
            <div className="caption">
                <h3>
                    <a href={url}>{name}</a>
                </h3>
                <div className="product__price">{price} {currency}</div>
                <div className="product__button-wrap">
                    <button
                        className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                        onClick={this.handleClick}>
                        {isInCart ? 'Remove' : 'Add to cart'}
                    </button>
                </div>
            </div>
        </div>
    );
}

P.S. Also make sure that your image path is relative to the file you are importing them in.

Method 2

img src={require(${filePath})}
— working
you also need to add default to get exact URL

img src={require(`${filePath}.default`)}

Method 3

You have to put those images in folder where your bundled application lives.

Method 4

I adding this comment so that future guys can benefit.

So the problem I faced was I had an array of people, and I needed to display the profile picture of each person

Solution

2 files :

• data.js which contains an exported JSON object
• main.js which has my react component

Step#1 : data.js

in data.js import all your local image asset files that you need.
ex.

import ProfilePicN from "./ProfilePicN.jpg";

export default [
  {
    "name": "PersonN",
    "image": ProfilePicN 
  }
]

*important: no quotes around the import, quotes on everything else as they are all literals

Step#2:

      import data from "./data.
    
      .
      .
      .
    /*inside the react component*/
     {
       data.map((dataItem,key)=> {
          <img src={dataItem.image}>
       })
     }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0