I just found a bug in my React Component with next js Image component.
My image src in URL gets 403 status, i.e. error for access denied and image wasn’t loaded. So I added onError method to this component as below:
<Image onError={({ currentTarget }) => {
currentTarget.onerror = null;
currentTarget.src = `/img/sources/${publisher.account_type}.png`;
}}
width={32}
height={32}
src={getImage(publisher)}
alt={publisher.name}
className="h-8 w-8 min-w-8 rounded-full object-cover "
/>
but it still gives 403 error in infinite loop and does not replace new source in error event handler.
When I add “unoptimized=true” to Image component the issue is resolved.
Why does this happen and is there any other solution for handling img src giving HTTP status 403 error?
Error Description
- maybe If you import and use an external library image, a 403 error will occur. So, the Next.js official document says that when importing an external image, you can write the domains in next.config.js
https://nextjs.org/docs/app/api-reference/components/image#domains
module.exports = {
images: {
domains: ['assets.acme.com'],
},
}