img 요소 없음 | Next.js

출처 URL: https://nextjs.org/docs/messages/no-img-element

문서 오류img 요소 없음

img 요소 없음

느린 LCP와 더 높은 대역폭 사용 때문에 <img> 요소 사용을 방지합니다.

이 오류가 발생한 이유

이미지를 표시하기 위해 next/image의 <Image /> 대신 <img> 요소를 사용했습니다.

해결 방법

자동 Image Optimization으로 성능을 개선하려면 next/image를 사용하세요.

참고: managed hosting provider에 배포한다면, 최적화된 이미지가 원본과 다른 과금 체계를 가질 수 있으니 제공업체 요금을 확인하세요.

일반적인 이미지 최적화 플랫폼 요금:

Vercel 요금

Cloudinary 요금 * imgix 요금

참고: 셀프 호스팅 시 sharp을 설치하고, 최적화된 이미지를 캐시할 충분한 스토리지가 있는지 확인하세요.

pages/index.js

    import Image from 'next/image'

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

    export default Home

블러 업 플레이스홀더 같은 next/image 기능은 사용하되 Image Optimization만 비활성화하려면 unoptimized를 사용하세요.

pages/index.js

    import Image from 'next/image'

    const UnoptimizedImage = (props) => {
      return <Image {...props} unoptimized />
    }

<picture> 요소와 그 안의 <img> 요소를 사용할 수도 있습니다.

pages/index.js

    function Home() {
      return (
        <picture>
          <source srcSet="https://example.com/hero.avif" type="image/avif" />
          <source srcSet="https://example.com/hero.webp" type="image/webp" />
          <img
            src="https://example.com/hero.jpg"
            alt="Landscape picture"
            width={800}
            height={500}
          />
        </picture>
      )
    }

이미지를 최적화하기 위해 custom image loader를 사용할 수 있습니다. loaderFile을 커스텀 로더 경로로 설정하세요.

next.config.js

    module.exports = {
      images: {
        loader: 'custom',
        loaderFile: './my/image/loader.js',
      },
    }

유용한 링크

보내기