Next Image, image disappears with layout responsive

Question

I'm trying to add the Next Image component to my project.

And I have a problem, the image disappears when I add layout='responsive'.

code:

<Box>
    <Link href='/' >
        <Image src='/images/logoDark.svg'
            alt='navbar-logo'
            width={260}
            height={56}
            layout='responsive'
        />
    </Link>
</Box>

Is there a solution? or any other way to optimize images?

Add the width 260 and height 56 on the container inside of link — rakesh shrestha, Aug 01 '21 at 04:34

score 5 · Answer 1 · edited Aug 01 '21 at 04:36

5

Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.

edited Aug 01 '21 at 04:36

Dharman

30,962
25
85
135

answered Aug 01 '21 at 04:30

Jac Wynn

96
2

score 4 · Answer 2 · edited Jan 04 '22 at 00:27

4

You need to wrap the next/image into a container with display:block, so that the image will be displayed.

edited Jan 04 '22 at 00:27

kyun

9,710
9
31
66

answered Dec 29 '21 at 11:49

Sorin

111
1
6

score 2 · Answer 3 · answered Jan 31 '22 at 12:04

set height and width for the parent of the Image component :

<Box width={263} height={56}>
    <Link href='/' >
        <Image src='/images/logoDark.svg'
            alt='navbar-logo'
            width={260}
            height={56}
            layout='responsive'
        />
    </Link>
</Box>

ensure the parent element uses display: block in their stylesheet like Box component or div

score 1 · Answer 4 · answered May 01 '23 at 17:08

layout = responsive is no longer valid it is deprecated. This How used Image in Nextjs responsively

    <Box
        position={'relative'}
        width={526}
        height={526}
      >
        <Image
          src={Myimage}
          fill
          alt=''
        ></Image>
      </Box>

Make sure you wrap the Image with Box and give it a width and a height and also important to give the position={'relative'} if you are using 'fill' prop inside Image.

Image is Responsive like a charm!!!

score 0 · Answer 5 · edited Aug 27 '22 at 12:35

Component

<div className="photo">
    <Image
    width={300}
    height={300}
    src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
    alt="photo"
    layout="raw"
    />
</div>
<style jsx>{`
    @media (max-width: 768px) {
        .photo {
        margin: 0 auto;
        justify-content: center;
        display: flex;
        width: 200px;
        height: 200px;
        }
    }
`}</style>

next.config.js

experimental: {
 images: {
  layoutRaw: true,
 },
},

This worked for me, the image doesn't disappear and is responsive,

Next Image, image disappears with layout responsive

5 Answers5