问题标签 [nextjs-image]

我正在尝试使用新的内置Image组件将图像插入到我的 Next.js v.10 应用程序中。

这是代码：

我的图像位于public/static/images文件夹中。

next.config.js：

结果：

请求网址：localhost:3000/_next/image?url=%2Fimages%2Fblack-arrow.png&w=768&q=75

状态码：500 内部服务器错误

Next.js 配置似乎有问题，无法识别图像的正确路径。我阅读了文档提示，但在我的情况下似乎没有任何帮助。

Next.js v.10中Image组件的正确使用方法是什么？

Next.jsImage在 v10 中引入了一个新组件，该组件应该是替代<img>标记的替代品。

尝试查看导入next/imageStorybook 的组件时出现错误：

TypeError: imageData is undefined

我一直在尝试覆盖图像对象preview.js（我使用的一种技术next/router，如此处所述）但我得到了同样的错误：

知道如何覆盖next/imageStorybook 中包的行为吗？

我尝试制作一个部分，该部分一方面包含一些文本，另一方面包含一个应该响应的图像（即，当窗口的大小也变得更小时，它会变得更小）。

使用简单<img src="/myimage.extension" alt="describe my image" />确实可以完美地工作。但是一旦我使用 Next.JS Image 组件（为了从它所做的优化中受益），它就会破坏响应能力。

事实上，为了制作一种带有响应式图像的英雄部分，我得到了这段代码（工作得很好）：

然后，用组件替换img标签Image会破坏响应性：图像永远不会变小。它保持它的大小。

你可以看到这个Sandbox上发生了什么。我正在寻找一种方法，使我能够精确控制 Image 组件的定位方式。

在桌面上，它会正确检测当前视口大小，但如果我在 Chrome 开发工具上模拟移动视图，该Image组件会检测到错误的设备大小。

我想知道Image组件如何检测设备大小。

在上一个问题中，作者尝试加载标准 DOM img: cloudinary image doesn't show up

答案是指定cloudName和publicId支持Image-

我正在尝试使用 NextImage组件来处理 Cloudinary 图像：

1. 填写next.config.js：

2. 编写示例代码：

Codesandbox 链接： https ://codesandbox.io/s/nextjs-cloudinary-779pr?file=/pages/index.js

问题： Image组件不显示图像。根据文档： https://nextjs.org/docs/api-reference/next/image cloudName组件中publicId没有道具Image。

我需要传递给 NextImage组件的参数是什么？

Cloudinary 图像具有以下属性：

我正在尝试遵循本教程。

这是 TL；DR：

它遵循类似于 Medium 的设计，图像向浏览器边缘渗出。

它有一个full-bleed图像类：

我真的不知道如何让我的next/image工作与这种东西？

我的Img.tsx文件看起来像：

我的components/mdx/index.ts样子：

我的.mdx文件包含普通的 HTMLimg标签，这些标签将使用Img上面写的组件（内部使用next/image）。

当我没有高度时如何获得全出血布局？我什layout="fill"至无法正常工作。它只是将图像重叠在一起。

有任何想法吗？

我是 NextJS 的新手。我刚刚在 NextJS 文档中看到了这个新的图像优化功能，但它对我不起作用。

这是我的代码。代码中指定了有效的部分和无效的部分。

我得到的错误是：

谁能帮我解决这个问题？

最近，Next.js 版本 10 发布了最新的Image元素，这对于一个拥有大量图像的网站来说非常有用！

我从服务器收到 HTML 响应，如下所示：

我要做的就是将 HTML 呈现为纯文本，并在页面上呈现期间将所有img标签转换Image为。我该怎么做才能全部替换img为Image？

I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component.

Here's my code:

I want to use Tailwind classes instead of the height and width property of the Next.js Image. But I can't because it throws me an error. Also, unsized property throws another error saying it's deprecated. Is there any solution?

Here is the error if I don't use the height and width property.

When I use the layout='fill' property it shows only one picture. And if I use the unsized property, then the following error is shown.

我创建了一个 NextJS 项目，但我无法导入该Image组件。我已经从 NextJS 导入了其他组件（例如Head，Link等），一切正常。现在，我遇到了Image组件问题。

有谁知道这里发生了什么？