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

Question

I am new to react, so I appreciate your patience.

I have the following folder structure:

• React-app>public>img (Has png images that won't load)
• React-app>src>components (Has a component that needs to render the images)
• React-app>data.js which looks like this (Note that these are snippets of the full code):

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
  },

The component that is trying to render the image looks like this:

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>

I have tried moving the img folder into different paths. I have tried changing the img src above to directly reference the image instead of the {img} object. The console log outputs the path to the image.

I am not sure if I should make the path of the image be relative to data.js, or product.js, but I have tried both. I am sort of convinced that the path is not the problem since even directly referencing the image from the component didn't work.

I have Googled and searched and haven't found anything that would help.

What am I missing?

Edit: I guess the trick was to make the path relative to the public folder. That's what did it for me.

Answer 1

Perhaps the path you're pointing to when calling store products array is wrong.

What you should do is import the image you want to use in the storeproduct file

Something like this

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
  },

And then use it inside your component like so

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>

Cheers!

Answer 2

Try this:

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,
  },
];