Next Image, image disappears with layout responsive

user_14133683 0
Viewed 12546

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?

nextjs-image next.js reactjs
4 Answers
user_48632700

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

user_140588740

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

user_103381750

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,

user_117704280
Related