在 ReactJs 中基于动态路径加载图像

Posted 2023-02-21

【中文标题】在 ReactJs 中基于动态路径加载图像

【英文标题】：Load images based on dynamic path in ReactJs

【发布时间】：2018-01-02 05:51:05

【问题描述】：

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

我正在提取所有数据，除了图片没有显示

【参考方案1】：

假设你使用的是webpack，你需要导入图片才能显示出来

<img src=require('images/06.jpg')  />

既然您的图像数据是动态的， 像这样直接指定导入路径

<img src=require(image)  />

没用。

但是，您可以通过使用模板文字来导入图像，例如

<img src=require(`$image`)  />

所以你的代码看起来像

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

    return (
        <div className="product thumbnail">
            <img src=require(`$image`)  />
            <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>
    );

附：还要确保您的图像路径与您要导入它们的文件相关。

【讨论】：

嗨 Shubham Khatri，这种方法解决了我的问题，但我收到下一个警告动态添加图像：./index.html 中的警告模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理这种文件类型。 | |

@JuanReinaPascual，我猜你现在可能已经解决了这个问题，但只是为了分享，你需要配置你的 webpack 配置以加载 jpeg, svg 文件类型

好东西...这不起作用：img src=require(filePath)。这确实有效img src=require(`$filePath`)

搜索了将近2小时后，找到了这个完美的答案。使用反引号是这里的关键 - require($image)

@Shubham Khatri 如果您使用像 webpack 这样的构建工具将图像直接放入公共目录，您将如何处理？我收到一个浏览器错误，说在与服务器相关的目录中找不到相应的图像..？

【参考方案2】：

img src=require($filePath) - 在职的 您还需要添加默认值以获取准确的 URL

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

【参考方案3】：

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

【讨论】：

如果你使用像 webpack 这样的构建工具将图像直接放到公共目录中，你会如何处理？

【参考方案4】：

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

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

解决方案

2 个文件：

data.js 包含一个导出的 JSON 对象

main.js 里面有我的 react 组件

步骤#1：data.js

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

import ProfilePicN from "./ProfilePicN.jpg";

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

*important：导入时没有引号，其他所有内容都用引号引起来，因为它们都是文字

步骤#2：

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