bbs-go-site

我是新来的反应者，因此感谢您的耐心配合。

我具有以下文件夹结构：

react-app> public> img（具有无法加载的png图像）
React-app> src> components（有一个需要渲染图像的组件）
像这样的React-app> data.js（注意，这些是完整代码的片段）：

export const storeProducts = [
  {
    id: 1,
    title: "Google Pixel - Black",
    img: "../../public/img/product-1.png",
    price: 10,
    company: "GOOGLE",
    info:
      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
    inCart: false,
    count: 0,
    total: 0
  },

试图渲染图像的组件如下所示：

import React, { Component } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { ProductConsumer } from '../context';
import PropTypes from "prop-types";

class Product extends Component {

  render() {
    const { id, title, img, price, inCart } = this.props.product;
    console.log(img);
    return (
      <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
        <div className="card">
          <ProductConsumer>
            {(value) => (
              <div className="img-container p-5"
                onClick={() => value.handleDetail(id)}>
                <Link to="/details">
                  <img src={img} alt="product" className="card-img-top" />
                </Link>

我尝试将img文件夹移动到不同的路径。我尝试将上面的img src更改为直接引用图像而不是{img}对象。控制台日志将输出映像的路径。

我不确定是否应该使图像的路径相对于data.js或product.js，但是我已经尝试了两者。我坚信路径不是问题，因为即使直接从组件引用图像也不起作用。

我已经搜索过Google并没有找到任何有用的信息。

我想念什么？

为什么我的React Component渲染图像没有显示？