问题标签 [next-images]

所以，我有一个容器div和一个Image组件。我希望图像高度等于容器高度的 100%，并且容器的宽度根据图像的宽高比自动决定。当我使用普通img标签时，这没有问题，但在 NextImage组件的情况下，图像的宽度为0px. 因为它要我为容器定义一个固定的宽度。? 我怎样才能达到我想要的？

我正在做的是这样的：

对于 div：

对于图像组件：

我想问一下如何使用这段代码。

module.exports = { reactStrictMode: true, }

在此代码块内：

我想在我的 next.js 项目中有内联 png 图像。由于这不是本机支持的功能，因此我正在使用该next-images库。

这是我的next.config.js

问题不是图像导入，而是所有其他导入：该代码破坏了.jsx我项目中的所有绝对导入。

关于如何解决这个问题的任何想法？

我在从我的 public/images 文件夹中提供静态图像时遇到问题。

它正确显示在我迄今为止一直在处理的文件中，除了动态文件 [itemId].js（如下图所示）

我得到的最有趣的线索是控制台中的这个错误。

它试图从 /items 提供服务，这根本不是我想要的......

有谁知道这背后的诀窍是什么？如果您需要更多信息，请告诉我。

<Image /> 组件生成的 img 看起来像这样，并且在我的所有页面中都是相同的：

我在使用下一个图像组件时遇到问题，有些图像没有显示在移动设备上，但它们显示在大屏幕上。如果我手动更改浏览器宽度，它们不会消失。

例如

我尝试不使用宽度和高度并使用布局填充，但问题是一样的，如果布局是响应式的，图像不会在所有屏幕尺寸下显示。

我看到能够使用公共文件夹以外的其他目录使用图像的另一种方法是使用 Next-Images 库，但是我按照文档中的描述正确地进行了所有设置，我在互联网，但没有任何效果，我只能加载它 svgs。我在我的项目中使用打字稿。我注意到一个关于打字的细节，我们必须添加这个参考：

变成这样：

到 next-env.d.ts 文件，但是每次我运行yarn dev命令时，添加的引用都会自动删除。

我的 next.config.js 文件：

我注意到的另一件事是：编译项目时，通过浏览器控制台标记<img src="">，在 src 中是路径：

由于我通过浏览器控制台手动输入了这条其他路径，因此它可以工作：

因此，如果有人知道我是否遗漏了我可能没有完成的任何设置，或者可能有帮助的视频，或者文档中的详细信息，我将不胜感激。

下一个版本：11.0.1 打字稿版本：4.3.5 下一个图像版本：1.8.1

我面临'错误：无效的src prop（blob：http：// localhost：3000/76946c41-4864-4fe7-9b95-030d4a9b8dd5）next/image，主机名“”未在您的图像下配置next. config.js'。在 NextJS 的文档中，通知了在设置中添加图像域的方式，但我无法为这种特定类型的图像配置它。已经试过把

但没有分辨率

我在我的项目中使用 Next.js。Next.js Image 组件具有占位符和 blurDataURL 属性，这种组合效果很好，但是如果我想从 SVG (SVG->base64) 添加我的自定义占位符，我会得到模糊的结果。

我所有试图找到禁用模糊效果的信息的尝试都失败了......有人可以帮助我吗？提前致谢！

我正在为博客文章创建客户端搜索，并将结果显示在带有图像的卡片中。我认为一个非常简单的用例。我正在使用 Next.js 及其图像组件来加载图像。

我正在对结果进行实时输入过滤器，以便在您输入结果卡时更改。我遇到的一个问题是，当您键入并替换卡片以及新图像时，浏览器仍在加载最后一张图像并导致加载图像的积压。

我想知道是否有办法取消刚刚删除的图像的请求。另一种方法是对过滤进行去抖动，但我希望尽可能提高性能。

这是我的一些代码。

搜索卡

实时过滤

搜索结果

图像加载积压

这发生在您的类型和结果根据您的查询更新/过滤时。此示例中的这些图像很小，但确实会影响最新的图像加载时间。特别是当您模拟慢速连接时。

我正在尝试使用来自 next/image 的 Image 并正在使用 firebase 存储来存储图像文件。

但是，执行以下操作时出现 403（禁止）错误：

我已经尝试使用 with<img>并且 url 工作正常，所以我认为这不是 url 或权限问题。

有谁知道问题可能是什么？

next.config.js

Firebase 存储规则