问题标签 [nextjs-image]

嗨，我正在使用 next js 和 tailwind css 开发一个项目。我想将此图像居中，但下一个 js 似乎忽略了 flex 和 justify-center，如图所示。

我想动态地将位置传递给（例如justify-start，justify-end）。任何帮助表示赞赏。

这是我的图像组件。

导出默认 NextImage

当我在 vercel 上部署时出现此错误

生成错误发生 14:34:33.017 错误：指定的图像。域应该是接收到无效值的字符串数组 ()。

为了让图像在本地显示在我的屏幕上，我做了以下设置：

在我的 env.local 我把这个

我像这样调用我的图像

在本地我可以看到图像，但是当我在本地运行我的应用程序时，我的 console.log 中也会出现此错误。我不知道如何或为什么。由于我的图像加载得很好。也许这就是 Vercel 不起作用的原因，但我不知道这两者是否相关。

上面的所有设置几乎都是从这个视频中复制粘贴的（从第 10 分钟到第 16 分钟观看）： youtube

到目前为止我已经尝试过：在 Vercel 上的环境变量中添加 NEXT_PUBLIC_IMAGES_DOMAIN，并将我的 Heroku 后端的名称作为值（就像我为 NEXT_PUBLIC_STRAPI_URL 所做的那样），它部署得很好，但是我收到了 500 服务器错误。但是我也不知道我应该如何解决这个问题。

有没有在 next.js 中使用 blob 的解决方案？以前我使用 img 和 blob URL 效果很好，但现在当我尝试使用 Image 组件 blob url 时不起作用。

我试图将 blob 添加到域：

但我收到错误表单服务器，因为下一个图像生成该请求 URL：

代替 ：

我正在尝试将我的标准更改<img/>为 NextJS <Image/>，但我找不到我的图像未正确呈现的原因。

这是基础标签

这完美地工作

使用 NextJS 图像时，它无法正常工作

我只能看到它<Image/>本身的外部 div 占用了整个 div 的宽度（文本 + 图像），因为它的父 div<Image/>显然没有宽度或高度，而它有 w-7/12。

我有从 API 获取的数据，我想用 Next 和 React 显示一个图像，但我看不到图像出现在屏幕上，只是显示图像的 alt。我使用的是 next/image 而不是 HTML img？

这是来自 API 的 imaeUrl 181fc194-ca2c-4f11-8442-4d52c094491f.jpg，

我添加它来修复路径，但仍然显示图像的 alt const image = `/${course.imageUrl}`

有什么想法我应该解决这个问题吗？

我正在尝试将 Next.js Image 组件与所有具有唯一尺寸的图像一起使用。他们的示例说明图像将拉伸到父 div 的宽度和高度。我试过包装它们，但不知道如何适应动态图像尺寸。我想有一个设定的宽度和高度来调整每个相应的比例。TIA。

这是我的代码（图像来自一个数组）——因为我没有设置高度，所以页面上没有任何内容。如果我使用 Tailwind h-auto，它仍然不显示：

这是我的用例：

• 我将在博客文章中添加图像。
• 我无法设置固定尺寸来渲染这些图像，因为每个图像都可能具有独特的比例
• 例如：我可能会上传 的方形图像400 x 400或矩形图像400 x 200

来自：https ://nextjs.org/docs/api-reference/next/image

要渲染图像，next/image需要您定义尺寸，方法是直接在<Image/>元素上设置，或者在父元素上设置。这很好，因为它可以防止图像加载阶段的任何布局偏移。

但是由于每个图像都有自己的尺寸，我可以为每个图像使用相同的尺寸。

这是我需要的结果。

我怎样才能做到这一点？

我目前的想法：

当我上传图片时，我还必须保存它的尺寸。在我开始使用之前next/image，我会简单地保存图像src。现在我必须保存类似的东西：

所以我可以像这样渲染它：

这是应该怎么做的吗？有没有更简单的解决方案？

我已经设置了图像域，next.config.js但图像没有显示在 localhost 上。但是，当代码推送到生产环境时，图像会加载到 vercel 上。

在本地主机上，我得到下面的图片。图像不加载。

在生产中，可以看到图像

我应该怎么做才能看到开发中的图像？

我正在使用 getStaticProps 从 Firebase 获取一些图像，然后使用下一个 Image 组件显示它们。但是，它们需要一段时间才能显示，如何在它们尚未加载时显示占位符？

我用 next/image 创建了一个简单的组件。

我想将此 img 的宽度和高度值传递给组件。

我可以从中获得价值吗？