400来自下一个/图像的错误请求

xam8gpfp 于 2022-11-05 发布在其他

关注(0)|答案(7)|浏览(186)

所以我试着用next/image的组件来显示图像。但是，图像没有被显示。我相信这是因为next/image给了我一个400错误请求。

当我点击该URL时，它显示“The requested resource isn 't a valid image”，这很奇怪，因为在从后端检索图像URL后，我能够下载图像来查看它是否是一个有效的图像，所以这个错误是在图像链接被传递到组件的属性后发生的。基本上，我的请求是正确的，但是next/image和图片url的交互被搞砸了，奇怪的是前几天我也没有这个错误，什么都没改就看到这个错误。
我已经这样配置了next.js配置文件，并且对后端的请求确实检索到了可下载的图像（next/image只是没有正确显示它）。
以下是我的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);

next.js

来源：https://stackoverflow.com/questions/67693355/400-bad-request-from-next-image

7条答案

按热度按时间

yxyvkwin1#

此问题是由于next.js版本11引起的。此问题已在next@11.0.2-canary.4版本中得到修复。您可以更新版本。问题将得到解决。

赞(0）回复(0）举报 2022-11-09

zrfyljdw2#

使用加载器功能解决了这个问题。不知道为什么。但是更新版本是最好的选择。

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

赞(0）回复(0）举报 2022-11-09

nwlqm0z13#

我已经迟到了，但希望我的回答能对其他人有所帮助。
将域的配置添加到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'],
    }
  }
});

赞(0）回复(0）举报 2022-11-09

nx7onnlm4#

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

赞(0）回复(0）举报 2022-11-09

1wnzp6jl5#

我不得不添加一个包含www前缀的域名到next.config.js中。例如，googlapis.com和www.googleapis.com。

赞(0）回复(0）举报 2022-11-09

8ehkhllq6#

我先导入了图像。

import product_1 from '../public/src/assets/images/ecommerce/product_img_01.jpg'

然后导入

import Image from 'next/image'

并照此使用。

<Image src={product_1} />

并且在下一个版本12.3.1中一切正常

赞(0）回复(0）举报 2022-11-09

ndasle7k7#

在项目路线的控制台中运行：rm -rf .next/
然后再次运行服务器并尝试

赞(0）回复(0）举报 2022-11-09

我来回答

400来自下一个/图像的错误请求

7条答案

相关问题

热门标签

最新问答