Why my image is appearing like <img src="[object Object]" /> using NextJS 14?

Question

I want to use the normal <img /> of react and not the <Image> component that nextjs gives you, however my images appear broken and when inspecting in the browser the src appears as "object Object", what could be happening?

<img className={styles.BenefitImage} src={BenefitImage} alt='Image' />

If I change the <img to <Image from nextjs it works... but I don't want to use the image component of nextjs...

My version of nextjs is 14.0.0

Answer 1

You are passing the image as an object that you imported on the top. Try to pass as a value BenefitImage.src.

Well, if you don't want to use the Image component then give a chance to next-lint to convince you to use the Image component,

Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images. This may incur additional usage or cost from your provider.