问题标签 [nextjs-image]

我正在尝试将我的应用程序迁移到最新版本的 NextJS (v10)。他们引入了一个新的图像组件（请参阅发行说明），当我尝试使用它时，我的应用程序无法正确提供图像。

在我的next.config.js中，我设置了一个basePath值，以便能够从子路径而不是根目录为我的应用程序提供服务：

设置后，Image组件无法获取我的 img 文件。没有它一切正常，但我的应用程序没有提供/an

在能够提供图像的同时，我应该如何定义src属性？basePath

我一直很难使用 NextJS 的Image组件。我想设置横幅图像。无论屏幕大小如何，此图像在任何时候都只能覆盖屏幕上的一定空间。我已经得到了这个主要与 和 的组合一起max-height: 30vh使用overflow: hidden。但是，当屏幕尺寸发生变化时，我似乎无法使图像居中。它应该从看到整个图像到专注于床上而有所不同。相反，它专注于图片的天花板。

实时示例：https ://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx

我正在使用 Next.js 并next/image显示图像，但 CSS 在其中不起作用。该图像为 SVG 格式，我已将其放在公共文件夹中。我正在使用 Tailwind CSS。

我不确定为什么它不起作用并且它没有反映在浏览器中。任何帮助将不胜感激！

我正在使用next/image，效果很好，除了实际加载的图像非常刺耳并且没有动画或淡入淡出。有没有办法做到这一点？我已经尝试了很多东西，但它们都不起作用。

这是我的代码：

根据文档，我可以使用该className道具，但这些道具会立即加载，并且在加载后我无法弄清楚应用类的任何方法。

我也试过onLoad了，根据这张票，不支持： https ://github.com/vercel/next.js/issues/20368

我正在尝试在页面初始化时访问查询参数并能够强制某些页面预加载图像。这实际上是用于测试和快照，因为我想关闭延迟加载并从一开始就加载所有图像。但是对于 next/image 我无法使用 getInitialProps 它出现并且使用钩子太慢了。

我想知道是否有一种方法可以获得InitaialProps图像组件。

我将新的Next.js Image 组件包含在另一个组件中，如下所示：

如您所见，我们正在使用prop-types. 我无法弄清楚要为宽度和高度设置什么道具类型。以下是 Next.js 文档中 Image 组件的示例用法：

我不确定如何设置。PropTypes.number? PropTypes.object? 还有什么？

我正在尝试在 NextJS 中使用 TypeScript 创建一个迷你应用程序，因为现在Next.js 支持TypeScript。而且我还想合并这两个新添加的功能：

• 图像组件和图像优化（下一个/图像）
• 国际化路由 (i18n)

举个i18n例子：

不幸的是，我很难在我的应用程序中使用它们next.config.js，至于普通应用程序（仅限 JavaScript），它可以正常工作。但对于 TypeScript 版本，我收到此错误：

如果你们中的任何人都可以帮助我，或者可以举例说明如何next.config.js在 TypeScript NextJS 应用程序中正确使用和合并这些新功能，那将非常有帮助。

我正在使用 NextJS Image 组件，如下所示：

它在本地工作，在 DOM 中看起来像这样：

但是，在生产中它不会加载图像。有一条 400 消息：

这似乎是因为：不允许使用“url”参数

在我next.config.js的配置中：

有人可以帮助我弄清楚如何next/image在生产中使用 Firebase 存储托管映像吗？在本地它加载正常。

我想更改next/image.

但在 CSS 中，

不管用。

我该如何解决这个问题？

我想在加载图像时显示骨架。我试图在 NextJS 提供onLoad的新Image组件中传递一个道具，但该函数在图像加载之前触发。

这是我的代码