问题标签 [nextjs-image]

我无法获得图像的自动比例高度

scss网格：工作正常

当我有静态宽度 = {900} 和高度 = {600} 时工作正常。它看起来如何

但我会有不同高度的图像

当我尝试做自动高度时，结果是这样的

我是nextjs的新手，我遇到了一些问题..

我的 public/imgs/myfolder 上有 30 张图片，我想以最简单的方式导入它们，也就是说，导入所有 30 张图片而不用每个名称导入...

我的代码是这样的：

问题是只有这张图片显示

我错过了什么？

我正在向 UserCard 提供 src 道具，但我也收到以下错误。

错误

不同文件中的代码如下

在 UserCard.js 中

在头像/Big.js

在头像/index.js

努力

如果我使用的是本机<img />，它会按预期工作

更多细节

我正在使用 Nextjs 版本 11.0.1

Github 存储库链接以获取更多见解：- https://github.com/KUSAD/dogeshot

我目前在使用 Next js 中提供的内置函数加载图像时遇到问题。即使在生产中运行它，我也尝试了不同的选项，图像加载时间仍然很长（几秒钟）。你们当中有没有人遇到过这个问题。

我很清楚，图像的第一次加载可能会很长，因为它上面有处理和缓存。然而，即使图像已经被缓存，这个问题也会出现。

使用下一个图像时，我遇到了链接断开的问题。

发生的情况是，有时我的图像会在某个视口宽度（比如 1200 像素）上加载，但如果我将其缩小到移动尺寸，图像链接将被破坏。

检查控制台后，将记录一个错误，状态为 500。 http://[frontend_url]/_next/image?url=http://[backend_api]/uploads/hero_Image_b538a45842.png&w=750&q=75

我可以通过设置来解决这个问题，unoptimized = true但这会否定 Image 组件的好处......

最令人困惑的是：为什么 Image 在较大宽度上加载图像，而不是在较小宽度上加载图像？

编辑：发现节点错误

我在我的项目中同时使用 Next JS 和 Material UI。对于图像优化，我想使用 Next JS Image 组件。

目前，我的卡片媒体如下所示。我从 API 调用中获取图像 URL row.image.url并将其分配给CardMedia组件的图像道具

但我想利用 Next JS Image组件进行优化和延迟加载，但无法找到适合它的方法。

有人遇到过这种要求吗？感谢你的帮助

谢谢文克

如果图像 url 已经有这样的查询字符串：

nextjs 图像添加带有附加问号的查询参数。喜欢：

知道如何解决这个问题吗？

我有一个父母div抱着两个孩子div（有图片，另一个有文字）。在大于768px的屏幕上，两者div并排显示，并且div持有image将占据由对方的内容定义的整个高度div。这是因为两个孩子div都有一套with: 50%。

在小于768px两个的屏幕div上，应堆叠在另一个之上。我不想为 parent 设置高度div，因为我希望它适应 child 的内容div，因此我不能为持有图片%的孩子设置 a 作为高度。div如果我px为div保存图片设置了一个值，它不会在更大的屏幕上拉伸到整个长度。

目前我使用 NextJs 作为我的前端和 Strapi 作为我的 web 应用程序的 CMS。我已在 Strapi 中将以下数据添加到我的 Citizenship 集合类型中：

这是我在 NextJs 方面的代码：

在我的输出中，除了只显示我的第一张图像而其他所有图像都给出 404 的图像之外，一切都很好。我该如何解决这个问题？

我已经在系统中设置了我的下一个 js 代码，其中包含一些静态图像，用作

但现在我必须使用basePath: '/product. 网址工作正常，但图像未加载，我需要/product/images/logo.png在每个 src 之前使用。

有没有办法在 next.config.js 中进行设置，而我不必为系统中的每个图像都更改它？