javascript - 如何将资产文件夹中的图片添加到我的 React 应用程序？

问题描述

我目前正在构建一个电子商务网站，但无法在我的 react 应用程序中显示我的图像。

我的组件称为“产品”，我在其中创建了一个名为“Products.jsx”的文件在此文件中，我正在使用我的产品列表创建一个数组：

const products = [
    { id: 1, name: 'Macbook-Slim', description: 'Apple Computer 13', price: '$500.00', image: '../../assets/furtniture1.jpg'},
    { id: 3, name: 'Macbook-Pro', description: 'Apple Computer 16', price: '$1200.00', image: '../../assets/furtniture2.jpg'}, 
]

出于同样的原因，我在我的“Product.jsx”中调用这些产品

const Product = ({ product }) => {
    const classes =useStyles();


    return (
        <Card className={classes.root}>
                <CardMedia className={classes.media} image='product.image' title={product.name} />
                <CardContent>
                    <div className={classes.cardContent}>
                        <Typography variant="h5" gutterBottom>
                            {product.name}
                        </Typography>
                        <Typography variant="h5">
                            {product.price}
                        </Typography>
                    </div>
                    <Typography variant="body2" color="textSecondary">{product.description}</Typography>
                </CardContent>
                <CardActions disableSpacing className={classes.cardActions}>
                    <IconButton aria-label="Add to Cart">
                        <AddShoppingCart />
                    </IconButton>

                </CardActions>
            </Card>
    )
}

为了渲染这些组件，我使用了我的 app.js 文件来确保它们会出现在前端。

import React  from 'react';
//import Products from './components/Products/Products';
//import Navbar from './components/Navbar/Navbar';

import { Products, Navbar } from './components';

const App = () => {
    return (
        <div>
            <Navbar />
            <Products />
        </div>
    )
}

export default App

但是，我的图像没有出现，我不知道我做错了什么。有谁知道我做错了什么？

另外，你可以看看我的（repo）[https://github.com/hvaandres/Ecommerce_Shopping_Stripe]

标签： javascriptnode.jsreactjsweb-applicationsreact-router

要添加图片，首先您需要在顶部导入它们。

import YourImage from "../assets/YouImage.png";

之后，您可以在 img 标签中使用它，如下所示：

<img src={YourImage}></img>

javascript - 如何将资产文件夹中的图片添加到我的 React 应用程序？

问题描述

解决方案

推荐阅读