Dynamically display images/icons/videos in react js?

I noticed when I serve the build and the page was on root ‘/’ the images load perfect but once I branch off to ‘/projects/1/1’ it becomes shaky. for some reason, only one image works perfect when it branches off and it was a data:imagebase64 type png (so then i tried to make all the images base64(couldn’t), most are static/media type data). But to me , the issue is the url( / vs /project/1/2) since to test i used the same images in the root ‘/’ in the ‘project/1/1/’. it works perfect in dev.

const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Header />} />
<Route path="/projects/:id/:contentId" element={<ProjectsPage />} />
</Routes>
</Router>
);
};

Heres how am implementing

{
    id: 1,
    text: 'test',
    title: 'testing',
    content: [
      {
        id: 1,
        detail: 'test',
        icon: '',
        extraText: 'App',
        image: DWC1, 
        techStack: [NodeJsLogo, ReactLogo, MySqlLogo],
        asset: DW1, 
        link: '*',
      },
    ],
  },

 const { id, contentId } = useParams();
  const navigate = useNavigate();

  const project = items.find(item => item.id === parseInt(id));
  const content = project?.content?.find(c => c.id === parseInt(contentId));

  if (!project || !content) {
    navigate('/');
    return null;
  }

  return (
    <div>
      <h1>{content.title}</h1>
      <img src={content.image} alt={content.detail} />
      <p>{content.extraText}</p>
      <div>
        {content.techStack.map((tech, index) => (
          <img key={index} src={tech} alt="Tech Stack" />
        ))}
      </div>
      <a href={content.link}>Visit Project</a>
    </div>