Need help understanding why next.js can't resolve my static image.

I have a monorepo next.js structure so I can share components between projects, and this is my folder structure.

.
├── apps
│   └── web
│       ├── components
│       ├── node_modules
│       ├── pages
│       └── styles
├── node_modules
└── packages
    ├── eslint-config
    └── typescript-config

I have tried to put my public folder in the root of the entire repo, and in the apps/web/ folder. I have tried to reference the image via /public/<file_path>.png and without it -> /<file_path>.png

                <Image src={`/static/haroombe_logo.png`} alt='logo' width="64" height="64" />

In both cases it throws a variation of the following error.

The requested resource isn't a valid image for / received text/html; charset=utf-8

The image is less than 200 KB so I am wondering if it is a config or alias issue I didn't set up.

Edit~: I fot to mention I am using the Shadcn ui monorepo for next js

EDIT/Workaround: I manually imported the image then set it in the src tag.