How can I display an external image file using an image component?
add a custom loader to your Image:
<Image
loader={() => imageUrl}
src={IMG_API}
alt={name || t('text-card-thumbnail')}
width={178}
height={178}
className="object-cover rounded-full"
/>
and for cache the image and better performance add your server domain in your next.config.js:
module.exports = {
reactStrictMode: true,
images: {
domains: ['localhost:5000'],
},
}
and then you can remove loader from Image