SVG is being passed to img src as an object-CodePudding

For a website using NextJS and Sanity.io,

I am importing an image locally

import large_logo from '../../assets/logo-large-1200x630.svg

and am calling it inside an img tag as src

<img src={large_logo}/>

However, the image is broken and not displayed.

The HTML is rendered as

<img src="[object Object]">

The only solution to this problem was to call the src of the "object"

<img src={large_logo.src}/>

However vanilla React does not require us to call the src.

Does importing not work when using NextJS and Sanity?

CodePudding user response：

For Next.js you have to do something like this:

/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg

and then in JSX

<Image src={large_logo} />

CodePudding user response：

When you are using Next.js and wanna render an image that the size is more than 40*40(pixels) need to import the <Image /> component from next/image. That component optimize your image and render in your Application. So follow the example below to help yourself..

import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg

inside your component you can add this code snipet for your image

<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />

First of all you need to change the image directory of the image and put it in your public directory of your App, cause this is the default behaviour that Next.js needs for the images.

Inside your component you need to pass the src value, alt value and usually height - width prop or layout prop.

You can also need the official documentation for the of Next.js : https://nextjs.org/docs/api-reference/next/image