Positioning Image in next js

Question

I want to make my Image on the most right of the page, I try to modify with position: absolute and right: 0. I also try to make parent position to relative, and image position to absolute, but why it doesn't work?

here's in my jsx file

        <div className={styles.images}>
          <Image
            src="/cloud.svg"
            alt="Picture of the author"
            layout="fill"
            className={styles.cloud}
          />
          <Image
            src="/kuil.svg"
            alt="Picture of the author"
            height={200}
            width={600}
            layout="intrinsic"
            className={styles.building}
          />
        </div>

Also in my css file.

.images {
    position: relative;
    margin: 90px auto 0 auto;
}

.building {
    position: absolute;
    top: 0;
    right: 0 !important;
    bottom: 0 !important;
}

please confirm its working . you defined the className with `styles` as js object . Then how will css work. you need use Dom css object instead of normal css — prasanth, Mar 31 '21 at 16:18
@prasanth He's probably using CSS Modules, `styles.images` returns a string. — juliomalves, Mar 31 '21 at 18:42

score 12 · Accepted Answer · answered May 26 '21 at 06:25

12

I had also encountered same problem. The Image tag when compiled wrap the img tag with a div tag of style position relative.

The solution is to simply wrap Image tag with div and add classname to the div.

check codesandbox

answered May 26 '21 at 06:25

Himanshu Patil

536
1
6
18

4

I've been seeing this solution EVERYWHERE and it's not working at all for me :( The only way I can absolutely position PNG/SVG images is using which it shows warnings about and says I cannot use it (I assume theyre not optimized for the Static HTML Export I'm using/NextJS period). I really really need to be able to move images wherever I want on the screen and I cannot figure out how to do it within this limited and quite annoying component in NextJS... it takes away so much of the functionality I need/learned to use – PhilosophOtter Nov 09 '21 at 21:18
1

It will be helpful if you share a reproducible example. – Himanshu Patil Nov 10 '21 at 05:36
1

I solved the issue by asking the designer to simply export the entire Sketch design as a single image to be used as a backgroundImage instead of expecting me to absolutely position everything she did with a mouse ;) – PhilosophOtter Nov 10 '21 at 15:46

score 3 · Answer 2 · answered Oct 06 '22 at 21:05

October 2022:

Looks like Vercel are moving forward with a better implementation that removes the wrapper from the <img /> tag

To access this feature you must import from a new path:

import Image from 'next/future/image';

and then in your next.config.js file add the new flag:

const nextConfig = {
  experimental: {
    images: {
      allowFutureImage: true,
    },
  },
};

Now your images are free. No longer wrapped in anything!

Beware: The API may change in future NextJS updates.

score 2 · Answer 3 · answered Jun 30 '22 at 13:53

2

There's now a more convenient way to have full control of how your Images are positioned in Nextjs:

First: It's currently experimental, so to have it work you have to enable it in your next.config.js file.

example:

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    images: {
      layoutRaw: true,
    },
  },
};

module.exports = nextConfig;

Secondly: Use layout prop of the Image to 'raw'

example:

<Image
   src={ImageSource}
   alt={'description here'}
   layout={'raw'}
   ...
/>

So you can now style your Image as you wished.

Hope this helps!

answered Jun 30 '22 at 13:53

Shamxeed

382
4
8

I think it has been again removed for now. `v12.2.0 Experimental remotePatterns and experimental unoptimized configuration added. layout="raw" removed.` – BenjaminK Jul 14 '22 at 19:45
It's been moved, not removed. It is now a future feature of the image module! :) I added an answer to address this. – xyeres Oct 06 '22 at 21:06

Positioning Image in next js

3 Answers3

October 2022:

To access this feature you must import from a new path: