rsnext/errors/no-img-element.md

No Img Element

Prevent usage of <img> element to prevent layout shift.

Why This Error Occurred

An <img> element was used to display an image. Use either <picture> in conjunction with <img> element, or use next/image that has better performance and automatic Image Optimization over <img>.

Possible Ways to Fix It

Import and use the <Image /> component:

import Image from 'next/image'

function Home() {
  return (
    <>
      <Image
        src="https://example.com/test"
        alt="Landscape picture"
        width={500}
        height={500}
      />
    </>
  )
}

export default Home

Use <picture> in conjunction with <img> element:

function Home() {
  return (
    <>
      <picture>
        <source srcSet="https://example.com/test" type="image/webp" />
        <img src="https://example.com/test" alt="Landscape picture" />
      </picture>
    </>
  )
}

Useful Links

• Image Component and Image Optimization