Next.js Discord

Discord Forum

Trying to get the same layout working, but does not work within Next.JS using next/image

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
What I want to achieve and I did on TailwindCSS: https://play.tailwindcss.com/4wzBFHpQFG

What actually does not work within Next.JS?:
import Image from 'next/image';

export default function About() {
  return (
    <div className="relative">
      <Image
        src="/assets/img/about2.png"
        alt="Building"
        layout="fill"
        objectFit="cover"
        className="z-10 w-64 h-64 "
      />
      <div className="absolute z-40 mx-64 my-80 w-72">
        <Image
          src="/assets/img/about1.png"
          alt="Building"
          width={300}
          height={300}
          className="w-60 h-60 object-cover"
        />
      </div>
      <div className="absolute mx-56 mt-[22rem] w-64">
        <Image
          src="/assets/img/dots.png"
          alt="Building"
          width={400}
          height={300}
          className="object-cover"
        />
      </div>
    </div>
  );
}


What am I doing wrong?
Answered by Masai Lion
Solution was

import Image from "next/image";

export default function About() {
  return (
    <div className="relative">
      <Image
        src="/assets/img/about2.png"
        alt="Building"
        width={300}
        height={300}
        className="absolute z-20"
      />
      <div>
        <Image
          src="/assets/img/about1.png"
          alt="Building"
          width={300}
          height={300}
          className="absolute z-40 mx-40 my-40 w-72"
        />
        <div>
          <Image
            src="/assets/img/dots.png"
            alt="Building"
            width={400}
            height={300}
            className="absolute mx-56 mt-[22rem] w-64"
          />
        </div>
      </div>
    </div>
  );
}
View full answer

1 Reply

Masai LionOP
Solution was

import Image from "next/image";

export default function About() {
  return (
    <div className="relative">
      <Image
        src="/assets/img/about2.png"
        alt="Building"
        width={300}
        height={300}
        className="absolute z-20"
      />
      <div>
        <Image
          src="/assets/img/about1.png"
          alt="Building"
          width={300}
          height={300}
          className="absolute z-40 mx-40 my-40 w-72"
        />
        <div>
          <Image
            src="/assets/img/dots.png"
            alt="Building"
            width={400}
            height={300}
            className="absolute mx-56 mt-[22rem] w-64"
          />
        </div>
      </div>
    </div>
  );
}
Answer