Question

我试图在页面上添加几张图像，但是渲染之后，它显示出图片已损坏。有人可以帮我找出问题所在吗？

有我的原始密码：

import React from 'react';
import Product from "./Product/index";
import Data from "../../../data/data.json";

const ProductList = () => {
    const renderedList = Data.goods.map(product => {
        return <Product product={product} key={product.name} />
    }
);   

    return (
        <div>{renderedList}</div>
    );
}

export default ProductList;

///////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///

import React, { Component } from "react";
import Thumb from "../../../Thumb/index";

const Product = props => {
        return (
            <div className="shelf-item">
                <div className="shelf-stopper">Free shipping</div>
                <Thumb 
                    classes="shelf-item__thumb"
                    src={props.product}
                />
                <p className="shelf-item__title">product</p>
                <div className="shelf-item__price">
                    productInstallment  
                </div>
                <div className="shelf-item__buy-btn">Add to cart</div>
            </div>
        );
    }

export default Product;

///////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///

import React from 'react';

const Thumb = (props) => {
    return (
        <div className={props.classes}>
            <img 
            src={`/Users/xlz/Desktop/codingProject/react/new- 
                  shopping-cart/src/static/products/${props.src.pictures}`} 
            alt={props.src.name} />
        </div>
    )
}

export default Thumb;

这是我的文件夹的层次结构：

new-shopping-cart
  src
      components
        Thumb
          index.js

      static
        products
          xxxxxxxxxxxx.jpg
          xxxxxxxxxxxx.jpg
          xxxxxxxxxxxx.jpg

我确定图片的路径正确。但是在页面上，有破碎的图片以及图片的替代文字。

为什么我的图像无法在React中成功加载？

0 个答案: