web-dev-qa-db-fra.com

Charger des images en fonction du chemin dynamique dans ReactJs

J'essaie d'afficher des images dans un panier que je fais, mais cela ne s'affiche pas. Dois-je importer chaque image? Je sais que mes chemins sont bons car cela a fonctionné auparavant.Je pense qu'il pourrait y avoir quelque chose de mal dans mon fichier product.js mais je ne peux pas le comprendre.

Voici mon 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;

Les données proviennent de ce produit.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;

Je tire toutes les données sauf les images qui n'apparaissent pas

jsonreactjsecmascript-6reduxreact-redux
13
malaika

En supposant que vous utilisez webpack, vous devez importer l'image afin de l'afficher comme

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

Maintenant que vos données d'image sont dynamiques, spécifiant directement le chemin d'importation comme

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

ne fonctionne pas.

Cependant, vous pouvez importer l'image en utilisant des littéraux de modèle comme

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

Ainsi, votre code ressemblera

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. Assurez-vous également que le chemin de votre image est relatif au fichier dans lequel vous les importez.

20
Shubham Khatri

Vous devez mettre ces images dans le dossier où réside votre application groupée.

0
vrael560