來自下一個/圖像的 400 錯誤請求

Question

所以我試圖用下一個/圖像的組件顯示圖像。 但是，沒有顯示圖像。 我相信這是因為 400 bad request error next/image 給了我。

當我單擊 URL 時，它顯示“請求的資源不是有效圖像”，這很奇怪，因為從后端檢索圖像 url 后，我能夠下載圖像以查看它是有效圖像，所以在圖像鏈接在組件的道具中傳遞后立即發生此錯誤。 基本上，我的請求是正確的，但是 next/image 與圖像 url 的交互被搞砸了。 奇怪的是幾天前我也沒有這個錯誤，在沒有改變任何東西之后，我看到了這個錯誤。

我已經像這樣配置了 next.js 配置文件，並且對后端的請求確實檢索到了可下載的圖像（下一個/圖像只是沒有正確顯示它）。

這是我的 next.js 的配置文件：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  images: {
    domains: [
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
    ],
  },
  
};


module.exports = withPlugins([[withImages]], nextConfig);

Answer 1

您是否更新了 nextjs 版本？ 似乎 10.1.X 和更新版本有一些問題... https://github.com/vercel/next.js/issues/23523

Answer 2

此問題是由於 next.js 版本 11 造成的。此問題已在next@11.0.2-canary.4版本中得到修復。 您可以更新版本。 問題將得到解決。

Answer 3

在 proyect 路由的控制台中運行： rm -rf.next/

然后再次運行服務器並嘗試

Answer 4

使用加載程序 function 解決了這個問題。 不知道為什么。 但是更新版本是最好的選擇。

<Image
    loader={()=>user.coverImage}
      src={user.coverImage}
      alt="user cover image"
      layout="fill"
      objectFit="cover"
/>

Answer 5

我遲到了這個話題，但希望我的回答能幫助別人。

將域的配置添加到 next.config.js 是不夠的（僅適用於本地）：

module.exports = {
  ...
  images: {
    domains: ['firebasestorage.googleapis.com'],
  }
}

對於生產，您需要確保您的“下一個”實例獲取該配置。

因此，就我而言，我為使其發揮作用所做的工作是：

前

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir
  }
});

后

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
    images: {
      domains: ['firebasestorage.googleapis.com'],
    }
  }
});