React images are not showing

I deployed a site with react and it does not show all of the images. I used js to import all the images

import productImg1 from "./images/products/product-1.jpg";
import productImg2 from "./images/products/product-2.jpg";
import productImg3 from "./images/products/product-3.jpg";
import productImg4 from "./images/products/product-4.jpg";
import productImg5 from "./images/products/product-5.jpg";
import productImg6 from "./images/products/product-6.jpg";
import productImg7 from "./images/products/product-7.jpg";
import productImg8 from "./images/products/product-8.jpg";
import productImg9 from "./images/products/product-9.jpg";

export default [
  productImg1,
  productImg2,
  productImg3,
  productImg4,
  productImg5,
  productImg6,
  productImg7,
  productImg8,
  productImg9
];

And added the images like this

import product from "../images";

 <img class="feature-image" src={product[3]} alt="" />

or

import Logo from "../images/logos/logo_square-removebg-preview.png";

   <img class="logo-image" src={Logo} alt="Beachside bakery logo" />

it works fine on codesandbox but it wouldn’t on netlify. I’ve tried disabling asset optimization and it didn’t work. How do I fix this?

github : GitHub - gleny4001/beachside-bakery: Created with CodeSandbox

codesandbox : beachsidebakery-main - CodeSandbox

netlify : https://beachside-bakery.netlify.app/

Welcome to the forums @gleny4001

The site looks the same to me on Codesandbox as it does on Netlify—no images.

In the case of all the images (e.g. src/images/logos/brandLogo.jpg) the file is in fact a text file with a URL pointing to the actual image (e.g. https://rawcdn.githack.com/gleny4001/beachside-bakery/ae6eac11a686e9f2b6758ddcb07549a082be8f20/src/images/logos/brandLogo.jpg).

And while Codesandbox does indeed use the rawcdn.githack.com URLs for image sources, they are different than what is seen in GitHub (which is why they don’t load.)

Thank you for the reply. So how do I fix the URL in github so that it shows the image on my website??

Ok so I just manually uploaded the images to github and it shows the images but when I make changes to the website codesandbox and commit changes to github (which I will do), it would use rawcdn.githack. URL again. Is there way to disable this?

I am not that familiar with CodeSandbox so I cannot say how/why images are pushed to GitHub as pointers to another location. You may need to consult the CodeSandbox documentation.