ReactJs中根据动态路径加载图片

Question

我正在尝试在我正在制作的购物车中显示图像，但它没有显示。我必须导入每个图像吗？我知道我的路径没问题，因为它以前有效。我认为我的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;

我正在提取所有数据，但图像只是不显示

Answer 1

假设你使用的是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>
    );
}

附注还要确保您的图像路径相对于您要导入它们的文件。

Answer 2

img src={require(

${文件路径}

)}

- 在职的 您还需要添加默认值才能获取准确的 URL

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

Answer 3

我添加此评论是为了让未来的人受益。

所以我面临的问题是我有很多人，我需要显示每个人的个人资料图片

解决方案

2 个文件：

• data.js，其中包含导出的 JSON 对象

• main.js 有我的反应组件

步骤#1：data.js

在 data.js 中导入您需要的所有本地图像资源文件。 例如。

import ProfilePicN from "./ProfilePicN.jpg";

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

*重要：导入周围没有引号，其他所有内容都引号，因为它们都是文字

步骤#2：

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

Answer 4

您必须将这些图像放入捆绑应用程序所在的文件夹中。

Answer 5

对我有帮助的是，我立即将图片导入到对象数组中，并在图像属性中输入一个变量。

cakeData.js

import gallery1 from '../../images/cakes/gallery1.jpg';
import gallery2 from '../../images/cakes/gallery2.jpg';
import gallery3 from '../../images/cakes/gallery3.jpg';
import gallery4 from '../../images/cakes/gallery4.jpg';

export const Cakes = [
    {
        id: 1,
        name: 'cheesecake',
        description:'',
        link: gallery1,
    },
    {
        id: 2,
        name: 'honeycake',
        description:'',
        link: gallery2,
    },
    {
        id: 3,
        name: 'applecake',
        description:'',
        link: gallery3,
    },
    {
        id: 4,
        name: 'cupcake',
        description:'',
        link: gallery4,
    },
]`

Cards.js

import React from 'react';
import './Card.css';

function Card(card) {
     return (
        <figure className='card'>
            <img
                className='card__image'
                src={card.link}
                alt={card.name}
                title={card.name}
                
            />
        </figure>
    );
}

export default Card;