I am working on my portfolio website with react and some of the images are not loading on the build version but it is also working fine on my local development server.

import cryptoImage from "./projectsImage/crypto4.png";
import wordIndexImage from "./projectsImage/Word Index.png";
import lcoImage from "./projectsImage/lco.png";

export const products = [
  {
    id: 1,
    title: "Crypto Stalker",
    img: cryptoImage,
    link: "https://crypto-stalker.netlify.app/",
    desc: "A crypto currency application to stalk all your favorite cryptocurrencies at one place including market cap, time gap and chart analysis.",
    tech: ["React", "Material UI", "Chart Js", "Redux", "Netlify"],
    gitlink: "https://github.com/codesabhi/crypto-stalker-app",
  },
  {
    id: 2,
    title: "Word Index",
    img: wordIndexImage,
    link: "https://wordindex.netlify.app/",
    desc: "A dictionary app which supports twelve languages along with audio support also a progressive web app that is downloadable on respectable devices",
    tech: ["React", "Material UI", "Axios", "PWAs", "Netlify"],
    gitlink: "https://github.com/codesabhi/word-index",
  },

And here I am mapping all the above data including images in a different component.

const ProductCard = ({title,img,link,desc,tech,git}) => {

  const theme = useContext(ThemeContext);
  return (
      <>
    <div className="c">
      <div className="c-left">
        <div className="c-card bg"></div>
        <div className="c-cards">
          <a href={link} target="_blank" rel="noreferrer" className="c-imglink"><img src={img} alt="" className="c-img" /></a>
        </div>
      </div>

I don't know why? but it is all working nice in local development but not on the build version