Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

kohigowild

빌드 시 정적(static) 이미지가 누락되는 문제 본문

React/NextJS

빌드 시 정적(static) 이미지가 누락되는 문제

kohi ☕ 2023. 3. 18. 15:47

Problem

  • Error: Image import ... is not a valid image file. The image may be corrupted or an unsupported format.
  • build 되는 과정에서 public 폴더 안에 있는 static 이미지가 누락되는 문제

 

Reason

  • Disable Static Imports
  • disableStaticImages 속성이 true로 되어 있어서 정적 이미지를 가져올 수 없었던 걸로 추측됨

 

Try to solve

invalid-images-config | Next.js

 

invalid-images-config | Next.js

Invalid images config In your next.config.js file you provided an invalid config for the images field. Make sure your images field follows the allowed config shape and values: module.exports = { images: { deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048

nextjs.org

https://github.com/vercel/next.js/issues/44012

 

Error: Image import ... is not a valid image file. The image may be corrupted or an unsupported format. · Issue #44012 · verce

Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: linux Arch: x64 Version: #152-Ubuntu SMP Wed ...

github.com

 

  • config 변경 및 추가
images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: [],
    path: '/_next/image',
    loader: 'default',
    loaderFile: '',
    disableStaticImages: false,
    minimumCacheTTL: 60,
    formats: ['image/webp'],
    dangerouslyAllowSVG: false,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    contentDispositionType: 'inline',
    remotePatterns: [],
    unoptimized: false,
  },

'React > NextJS' 카테고리의 다른 글

Embla Carousel 사용법 정리 (Feat. Next.js)  (0) 2023.04.14
NextJS에서 구글 폰트 적용 시 구문 오류  (0) 2023.03.16
'React/NextJS' Related Articles more