web-dev-qa-db-ja.com

ReactJsの動的パスに基づいて画像を読み込む

私が作っているショッピングカートに画像を表示しようとしていますが、表示されません。各画像をインポートする必要がありますか？以前は機能していたため、パスが正常であることはわかっています。product.jsファイルに何か問題があるかもしれないと思いますが、理解できません。

これが私の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;

データはこの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;

画像が表示されない以外のすべてのデータを取得しています

jsonreactjsecmascript-6reduxreact-redux
13
malaika

Webpackを使用していると仮定すると、次のように表示するために画像をインポートする必要があります

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

画像データが動的になったので、インポートパスを次のように直接指定します。

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

動作しません。

ただし、次のようなテンプレートリテラルを使用して画像をインポートできます。

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

あなたのコードは次のようになります

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>
    );
}

追伸また、イメージパスがインポート先のファイルに相対的であることを確認してください。

20
Shubham Khatri

バンドルされたアプリケーションが存在するフォルダーにこれらの画像を配置する必要があります。

0
vrael560