1

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?

ebsco
  • 21
  • 1
  • 4
  • I've looked at previous posts on this similar issue however, all of them describe the solution as not instantiating the image as an object ie. remove the {}. However, in order to render the image, I need it to be an JSX expression. – ebsco Jan 23 '22 at 09:03
  • https://stackoverflow.com/questions/58169885/sending-svg-as-a-prop-gets-rendered-as-object-object https://stackoverflow.com/questions/53024792/react-returns-image-src-as-object – ebsco Jan 23 '22 at 09:04
  • 1
    Does this answer your question? https://stackoverflow.com/a/67641345/11613622, https://stackoverflow.com/questions/68517122/background-div-images-not-displaying-when-setting-them-via-inline-styles-dynamic/68517270#:~:text=When%20you%20do%20something%20like%20this%20import%20img%20from%20%27path/to/img.ext%27%2C%20img%20is%20not%20the%20source%2C%20it%20is%20an%20object%20of%20type%20StaticImageData%2C%20which%20is%20defined%20like%3A – brc-dd Jan 23 '22 at 15:00
  • 1
    Does this answer your question: [Background Div Images not displaying when setting them via Inline Styles Dynamically | Next.Js](https://stackoverflow.com/questions/68517122/background-div-images-not-displaying-when-setting-them-via-inline-styles-dynamic)? The difference is that Next.js handles local images imports internally, and converts them to that object format. It's fine and expected for you to use `large_logo.src` with the `` tag. – juliomalves Jan 23 '22 at 16:14

2 Answers2

3

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} />
saibbyweb
  • 2,864
  • 2
  • 27
  • 48
0

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

Manfre
  • 656
  • 5
  • 12
  • 30