react - ładowanie danych z pliku json

mam plik json, w którym są ścieżki do zdjęć przedmiotów, które chcę wyświetlić na stronie, zdjęcia umieściłem w folderze public, nie wyświetla mi zdjęć na stronie, inne dane wyświetla, oto kod link i strona link , chodzi o zakładkę shop, próbowałem dawać ścieżkę bez kropki, albo zamiast folderu public assets, albo assets w public i też nic to nie dało

Jak przeglądam projekt na githubie to widzę, że zdjęcia masz w dwóch folderach

1. public/images/
2. src/images

ale zgaduje, że próbowałeś testować czemu to nie działa, więc dlatego jest to rozdzielone.

Ładować zdjęcia z folderu src/images powinieneś w taki sposób (https://create-react-app.dev/docs/adding-images-fonts-and-files/) o ile wszystko jest prawidłowo skonfigurowane

import React, { useState, useEffect } from "react";

import logo from './images/logo.png'; // Musisz podać ścieżkę relatywną ../images/logo.png, ../../images/logo.png;

const Header = () => {
  return <img src={logo} alt="Logo" />;
}

export default Header;

Przy folderze public sprawa wygląda w taki sposób (https://create-react-app.dev/docs/using-the-public-folder), że powinieneś skorzystać ze zmiennej środowiskowej process.env.PUBLIC_URL

import React, { useState, useEffect } from "react";

const Header = () => {
  return <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="Logo" />;
}

export default Header;

Jeśli chcesz przechowywać zdjęcia w osobnym pliku, tak jak teraz masz plik data.json to zmieniłbym go na data.js i wykorzystał jeden ze sposobów

import React from 'react';
import IphoneImage from '../images/products/iphone/iphone6.jpeg';

const data = [
  {
    id: 1,
    title: "Apple iPhone 11",
    price: 760,
    image: `${process.env.PUBLIC_URL}/images/products/iphone/iphone3.jpeg`,
    
  },
  {
    id: 2,
    title: "Apple iPhone 12 Pro",
    price: 810,
    image: <IphoneImage />
  },
];

export default data;

Tylko musisz sprawdzić, czy wszystkie ścieżki są prawidłowe, bo do końca ich nie sprawdzałem.