问题标签 [nextjs-image]

我打算使用 next/image 来优化我网站上的图像。但是，在构建项目之后，我的所有图像都获得了一个样式属性，该属性似乎是重置样式。我是 React 和 Next.js 的新手，我似乎找不到任何有同样问题的人。

这是我的下一个/图像：

这是在浏览器中呈现的图像：

如您所见，next/image 已将此样式属性添加到图像中：

我知道这可能是 next/image 的一个功能，可以使内置的“布局”属性正常工作。但是，如果我手动删除浏览器中的样式属性，图像似乎可以正确显示。

有没有办法让 next/image 知道我不想要这个样式属性？

所以我试图用下一个/图像的组件显示图像。但是，没有显示图像。我相信这是因为 400 bad request error next/image 给了我。

当我单击该 URL 时，它显示“请求的资源不是有效图像”，这很奇怪，因为从后端检索图像 url 后，我能够下载图像以查看它是有效图像，所以在图像链接在组件的道具中传递后立即发生此错误。基本上，我的请求是正确的，但是 next/image 与图像 url 的交互被搞砸了。奇怪的是几天前我也没有这个错误，在没有改变任何东西之后，我看到了这个错误。

我已经像这样配置了 next.js 配置文件，并且对后端的请求确实检索了可下载的图像（next/image 只是没有正确显示它）。

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

在我的应用程序中，我允许用户上传他们的图片。上传后它进入公共文件夹，并且在数据库中只有一个直接链接用于未来的请求。

在页面上显示这些图像时，我遇到了问题。Image组件想知道每个图像的高度和宽度。所以我也想知道。

在这种情况下，工作流有哪些可用选项？上传和请求时的处理都对我有用。

我是 Next.js 的新手，我构建了一个简单的登录页面，并希望使用我在 package.json 中设置为"build": "next build && next export". 但我得到这个错误：

有人可以帮助我吗，我阅读了文档并在根目录中创建了 next.config.js 并粘贴了以下内容：

我认为我需要一个路径，但问题是我没有使用托管图像，我在公共文件夹中有一个图像文件夹。

我知道这可能是一个愚蠢的问题，但我被困住了。

我是新手，NextJS但我在 ReactJS 和 Webpack 方面有很好的经验。我的问题是 NextJS 提供了一个包'next/image'。我想非常深入地了解或理解为什么我应该使用他们的包来加载没有默认img标签的图像。

在他们的文档中，他们说这样的一行We can serve an optimized image like so。它们是什么意思Optimized Image，为什么 ReactJS 或任何其他包不这样做？

I have deployed my Next.js app on Ubuntu 16.0.4 with nginx.

I already have an app deployed on the root mywebsite.com which is working fine. I'm trying deploy this app at mywebsite.com/some-keyword

The app seems to work fine but not rendering the images.

How can I fix this ?

Nginx updates:

next.config.js

不知道宽高的情况下如何使用下一个js图片？

当我们使用 nextjs 图像组件时。我们需要将高度和宽度作为道具。但是我们怎么知道正确的高度和宽度呢？

我最近升级到 nextjs 11 并使用了他们的新图像功能，您可以在其中导入图像并在 src 属性中使用它们，如下所示：

然后使用可以将其用作

它工作正常，直到它开始抛出错误

我很困惑，因为我完全按照文档 https://nextjs.org/blog/next-11#image-improvements中的使用方式使用它

这个错误似乎只发生在开发服务器上

Next.js 最近做了一个修改（在 v11.0.x 中），它具有以下类型定义：

在next-env.d.ts（不可修改，在每次构建时重新生成）：

在node_modules/next/image-types/global.d.ts（不可修改，不想使用patch-package）：

现在的问题是我正在使用@svgr/webpack，因此我需要执行以下操作：

早先将此代码放在index.d.ts用于工作的资产文件夹中。但现在它没有了，因此我被迫单独转换每个导入。有什么办法可以直接做到这一点？

我正在使用 react dropzone 在我的简单应用程序中上传多张图片。为了显示要删除哪种类型的图像，我使用 TypeScript 制作了一个单独的组件。但 Next.js 图像 src 显示错误，如 Type:

渲染文件.ts：

类型.ts：

我在 src 道具中的错误是什么？