next/image doesn't work but img jsx works

[MikeyA-yo]

Link to the code that reproduces this issue

https://github.com/MikeyA-yo/bibleapp/blob/main/components/minimal-issue.tsx

To Reproduce

import Image from "next/image";
<Image src={imgsrc} height={876} width ={544} alt = 'image alt' />

Current vs. Expected behavior

I get that error and no image rendered

 ⚠ Fast Refresh had to perform a full reload when \bibleapp\\bible\\node_modules\\next\\dist\\client\\image-component.js","ids":[]} changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 8107
  Available CPU cores: 4
Binaries:
  Node: 21.5.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.0
  react-dom: 18.3.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

normal img jsx works with the code solution above and renders the image that's what i'm using now, but i just decided to help file this bug report for the sake of optimization and more features from next/image

[shubhankartrivedi]

import crossImage from '../public/cross.jpg';
<Image src={crossImage} height={876} width ={544} alt = 'image alt'/>

You have to use this syntax for src prop. Don't put the /cross.jpg. Just do this and it will work as expected.

[MikeyA-yo]

ohk thanks this works, but previously that kind of path works for my older projects

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.