reactjs NextJS ImageError：无法优化映像，也无法回退到上游映像

ukxgm1gy 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(182)

我创建了中间件，并在配置中间件中添加了匹配器/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)。当我尝试运行npm run dev时。结果如下所示：

ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}
ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}

在我添加中间件之前，这是不会发生的，这发生在我在中间件中添加配置匹配器时。下面是我做的中间件的配置匹配器：

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)',
    '/partner/:path*'
  ],
};

我试图从中间件匹配器中省略_next/image。因此，无法加载某些图像。
有办法破案吗？或者我做中间件的时候忘了什么？

reactjs

来源：https://stackoverflow.com/questions/76286726/nextjs-imageerror-unable-to-optimize-image-and-unable-to-fallback-to-upstream-i

1条答案

按热度按时间

fjaof16o1#

我有同样的问题，我意识到当我把一个控制台，中间件试图执行一个请求我的localhost +名称的图像，例如http：//localhost：3000/logo.png.所以，要解决这个问题一个包括，图像名称上的macher -以excluse我的形象。

url: 'http://localhost:3000/logo.png',
  bodyUsed: false,
  cache: 'default',
  credentials: 'same-origin',
  destination: '',
  headers: {
  accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  accept-language: 'en-US,en;q=0.9,pt;q=0.8',
  connection: 'close',
  cookie: 'NEXT_LOCALE=es; i18next=pt',
  host: 'localhost:3000',
  if-none-match: 'jJikJHW-EIDJaRhW6K+moiS2QS9vmG+6h9x5+FQI6u8=',
  referer: 'http://localhost:3000/pt',
  sec-ch-ua: '"Google Chrome";v="113", "Chromium";v="113", "Not-A.Brand";v="24"',
  sec-ch-ua-mobile: '?0',
  sec-ch-ua-platform: '"macOS"',
  sec-fetch-dest: 'image',
  sec-fetch-mode: 'no-cors',
  sec-fetch-site: 'same-origin',
  user-agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36',
  x-forwarded-for: '::1',
  x-forwarded-host: 'localhost:3000',
  x-forwarded-port: '3000',
  x-forwarded-proto: 'http',
  x-invoke-path: '',
  x-invoke-query: '',
  x-middleware-invoke: '1'
},
  integrity: '',
  keepalive: false,
  method: 'GET',
  mode: 'cors',
  redirect: 'follow',
  referrer: 'about:client',
  referrerPolicy: '',
  signal: AbortSignal {
  [Symbol(kAborted)]: false,
  [Symbol(kReason)]: undefined,
  [Symbol(kOnabort)]: undefined,
  [Symbol(realm)]: { settingsObject: { baseUrl: undefined } }
}
}
ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (/Users/wellingtonnascimento/Desktop/projects/frontend/ezpag-frontend-nextjs/node_modules/next/dist/server/image-optimizer.js:620:19)
    at async cacheEntry.imageResponse

解决方案：

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|logo.png|sw.js).*)']
};

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs NextJS ImageError：无法优化映像，也无法回退到上游映像

1条答案

相关问题

热门标签

最新问答