import Image from 'next/image';
import * as React from 'react';
import { Container } from '~/components/layout';

export interface PostHeaderImageProps {
  src: string;
  alt?: string;
}

export const PostHeaderImage: React.FC<PostHeaderImageProps> = ({ alt, src }) => {
  return (
    <section className="px-4 lg:px-6 pt-12">
      <Container>
        <div className="relative w-full h-full aspect-video overflow-hidden rounded-md shadow-lg">
          <Image loading="lazy" src={src} alt={alt} layout="fill" objectFit="cover" />
        </div>
      </Container>
    </section>
  );
};

/* eslint-disable @next/next/no-img-element */
import * as React from 'react';
import { Container } from '~/components/layout';

export interface PostHeaderImageProps {
  src: string;
  alt?: string;
}

export const PostHeaderImage: React.FC<PostHeaderImageProps> = ({ alt, src }) => {
  return (
    <section className="px-4 lg:px-6 pt-12">
      <Container>
        <div className="relative w-full h-full aspect-video overflow-hidden rounded-md shadow-lg">
          <img loading="lazy" src={src} alt={alt} className="object-cover" />
        </div>
      </Container>
    </section>
  );
};

--- 
+++ 
@@ -1,4 +1,4 @@
-/* eslint-disable @next/next/no-img-element */
+import Image from 'next/image';
 import * as React from 'react';
 import { Container } from '~/components/layout';
 
@@ -12,7 +12,7 @@
     <section className="px-4 lg:px-6 pt-12">
       <Container>
         <div className="relative w-full h-full aspect-video overflow-hidden rounded-md shadow-lg">
-          <img loading="lazy" src={src} alt={alt} className="object-cover" />
+          <Image loading="lazy" src={src} alt={alt} layout="fill" objectFit="cover" />
         </div>
       </Container>
     </section>
Revert "fix image element in post header"

This reverts commit 90c28bc053ddf8df01d177de98afc9f04af74a57.
