Netlify images are not showing (React)

Question

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. How do I fix this?

github : https://github.com/gleny4001/beachside-bakery

codesandbox : https://codesandbox.io/s/github/gleny4001/beachside-bakery

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

Did you see the error message? `Module not found: Error: You attempted to import /src/images/products/product-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.` It even has a suggestion about how to fix the problem. Did you try that suggestion? Did it work? — Stephen Ostermiller, Jan 23 '22 at 16:38

Netlify images are not showing (React)

0 Answers0