I'm trying to create a products list to show some headsets. But I can't show the images of the products.

I have a ProductCard component and a MainContent Component

const ProductCard = [
{
    id:1,
    productName:"Morcego Preto",
    description:"Confortável e com alta qualidade sonora",
    price: 399,
    currency: "$",
    thumb: "/public/assets/1.png",
}...



const MainContent = () => {
  console.log(ProductCard);
  const listItems = ProductCard.map((item) => 
    
    <div className="card" key={item.id}>
      <div className="cardImg">
        <img src={item.thumb} alt="Headsets Fallen Store" />
      </div>...

But in the browser I receive the "Not allowed to load local resource" message when I try to render it.

Can anyone help me to understand the problem? Here is the repository: https://github.com/CarlosHenriqueMkt/headset-ecommerce-list

CodePudding user response：

in you data folder inside the js file do it like that

`import yourImage_0 from '../your URL_0' import yourImage_1 from '../your URL_1' import yourImage_2 from '../your URL_2' import yourImage_3 from '../your URL_3' const myData = [ { name: 'hello world 0', image: yourImage_0, another_thank: 'hi world' }, { name: 'hello world 1', image: yourImage_1, another_thank: 'hi world' }, { name: 'hello world 2', image: yourImage_2, another_thank: 'hi world' }, { name: 'hello world 3', image: yourImage_3, another_thank: 'hi world' }, ]

CodePudding user response：

Error fixed:

I don't need to declared the "public" path. So, the correct path was

./assets/imageName.png