Search code examples
reactjsnext.jssanity

SVG is being passed to img src as an object

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?

Solution

  • 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} />