A question arises in my Firebase web app regarding the NextJS component below:
import Link from "next/link";
import Image from 'next/image'
import "./displayShop.css";
import telImg from '../images/Telephone.png';
export default function DisplayShop(
{name,phone,address,web_site,food_type}:
{name:string,phone:string,address?:string,
web_site?:string,food_type?:string}) {
return (
<div className='Card'>
<div className='RNT'>
<div className='RN'>{name}</div>
<div className='RT'>{phone}</div>
<a href={`tel:${phone}`} className='telIcn'>
<Image
className='img'
src={telImg}
alt="Telephone-Clip"
width={70}
height={70} />
</a>
</div>
<div className='RTS'>
{address &&
<div className='RA'>{address}</div>
}
</div>
{food_type &&
<div className='RF'>{food_type}</div>
}
{web_site &&
<div>
<Link className='RW' href={web_site}
target='_blank'>{web_site}</Link>
</div>
}
</div>
)
} /* End of ShowData */
An issue has been identified where only the alt text of the Image component (Telephone-Clip) is visible and not the actual image. Can anyone shed light on why this might be happening?
Furthermore, how can this problem be resolved effectively?
For further context, the following errors are being displayed in the browser's Web Developer Tools console:
GET
https://myapp.web.app/_next/image?url=/_next/static/media/Telephone.04133dbb.png&w=96&q=75
[HTTP/3 404 123ms]
GET
https://myapp.web.app/_next/image?url=/_next/static/media/Telephone.04133dbb.png&w=96&q=75
Status
404
VersionHTTP/3
Transferred2.61 kB (6.68 kB size)
Referrer Policystrict-origin-when-cross-origin
Request PriorityLowest
DNS ResolutionSystem