为什么我的 React 组件不渲染图像？

Question

我是新来的反应，所以我感谢你的耐心等待。

我有以下文件夹结构：

• 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} object。控制台日志输出图像的路径。

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

我用谷歌搜索并搜索过，但没有找到任何有用的东西。

我错过了什么？

编辑：我想诀窍是使路径相对于公用文件夹。 那就是为我做的。

Answer 1

也许您在调用商店产品数组时指向的路径是错误的。

你应该做的是导入你想在 storeproduct 文件中使用的图像

像这样的东西

Import img from  "../../public/img/product-1.png"

export const storeProducts = [
  {
    id: 1,
    title: "Google Pixel - Black",
    img,
    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 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>

干杯!

Answer 2

试试这个：

import image from "../../public/img/product-1.png"

export const storeProducts = [
  {
    id: 1,
    title: "Google Pixel - Black",
    img: image,
    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,
  },
];