问题标签 [nextjs-image]

我正在使用 Next.js 中的Image组件（它是 Next.js 的新功能）。我试图给出源 URL：

但它向我显示了这个错误。我也改变了我next.config.js的身份

但没有什么对我有用。如果您对此有所了解，请提供帮助。

我想在 styled-components 中使用 Next.js 的新功能 Image optimization 对背景图像进行优化。有没有办法在没有Image组件的情况下优化图像？

我们想使用 NGINX 启动 NextJS 10 应用程序，因此我们使用类似于以下的配置：

它工作得很好，它将我们的静态缓存了一年，但是当我们使用NextJS 图像时，我无法在动态expires调整大小的图像上添加标签。

如果我做：

它只是在图像上返回 404。

这是我的服务器部分 NGINX 配置：

在 Material UI 中，显示图像的组件具有图像参数。例如：

在 Next.js v10 中有一个Image自动缩放图像的新组件：https:  //nextjs.org/docs/api-reference/next/image

有没有人想出如何将新Image组件与 Material UI 一起使用？

我使用 Next.jsImage组件进行图像优化。它在 dev 上工作得很好，但它不会在生产中从外部 URL 加载图像。

我能做些什么？

我在隐藏的画廊中有一堆图像，仅在用户单击某个按钮时显示。

在开发服务器上，一切都很好，没有错误或问题，但是当我部署我的网站并打开图库时，图像不显示并在控制台中抛出 404 错误（我包含了所需的道具）。

当我用 替换<Image/>组件时<img>，开发服务器上的一切都很好并且可以正常运行。有人可以帮忙吗？我搜索了很多，我没有发现任何类似的问题。

我有一个 Next.js 应用程序，我需要一个图像来填充其容器的整个高度，同时根据其纵横比自动确定其宽度。

我尝试了以下方法：

此代码段编译成功，但在前端，我看到以下错误：

错误：带有 src "/deco.svg" 的图像必须使用 "width" 和 "height" 属性或 "unsized" 属性。

这让我很困惑，因为根据文档，使用时不需要这些属性layout="fill"。

我有一个 Next.js 应用程序，使用新的 next/image 功能，在尝试使用以下策略访问 S3 对象时收到 403-Access denied ：

根据refererS3 文档的要求，它包含在请求标头中，如下所示：

如果我确实Condition从上述策略中删除，它将允许访问图像，但这不是我想要的。

顺便说一句，我在 SO 和其他地方看到了相关问题，但他们没有解决这个具体问题。

我正在尝试在我的组件中使用 Next.js 图像组件进行自动图像优化。

但我得到这个错误：

错误：带有 SRC“/renmote-location”的图像必须使用“width”和“height”属性或“unsized”属性。

注意：我希望图像采用 div 的大小，这就是我设置它的原因，layout="responsive"但是当我设置不需要的高度和宽度时，我不会收到此错误。

我已经阅读了文档，并且如前所述，我什至将布局设置为填充，即使文档说如果布局设置为填充，您不需要高度/宽度道具，我仍然会收到此错误。

我正在尝试从此 JSON 文件动态加载信息并将其插入到组件中。

我的代码的位置是/pages/about/index.js，我的 JSON 文件在/pages/about/about.json.

我解析代码的方式是这样的：

该组件位于同一文件中。我只附加配置文件中的 img 元素，因为其余的工作正常。

如果我取出 img 元素或放入实际路径，它会完美运行，但这种方式不起作用。我能找到的唯一类似的帖子是这个，但它从未得到答案。 StackOverflow：动态导入图像（React Js）（需要 img 路径找不到模块）

更新代码 1：

移除后组件现在是这样的require()。

next/image更新代码 2：从 img切换到它可以工作！我不得不删除最后一个/，它起作用了。