问题标签 [nextjs-image]

我正在使用新的 next/image 组件从 digitaloceanspaces 加载头像图像，如下所示：

加载程序如下所示：

但它没有缓存它。我尝试将它添加到我的 next.config

但没有任何工作。谁能告诉我如何从远程网址缓存图像？

我正在尝试在我的公司系统上使用 Next.js，但是每当我运行“npm run build”时，构建都会失败并显示以下消息：Error: Cannot find module 'sharp'

我尝试安装Sharp，但出现此错误：

这可能是因为出于安全原因，我的系统终端上阻止了 github URL。有没有办法在不从 github 获取的情况下安装Sharp？我可以在浏览器上访问 GitHub，所以如果从那里下载文件然后以某种方式安装它，我可以做到这一点。

操作系统：Windows 10

我正在开发 NextJS 应用程序，但无法让 Image 组件正常工作。

正常的 img 元素使用与 Image 组件相同的 src 属性路径可以正常工作。

我的项目有标准的公用文件夹，里面有一个名为 nageldog.png 的图像

在浏览器控制台中

为元素生成的 src 路径<img>看起来不错：

<img src="/nageldog.png" alt="a">

为组件生成的 src 路径<Image>看起来很奇怪：

<img alt="b" src="/_next/image?url=%2Fnageldog.png&amp;w=256&amp;q=75"

我在控制台中收到错误：“加载资源失败...状态 500”http://localhost:3000/_next/image?url=%2Fnageldog.png&w=64&q=75

为什么 Image 组件不会加载？谢谢！

如何Image在来自服务器的原始 HTML 响应中使用 NextJS 元素，例如：

我们正在将我们的应用程序从 Create React App 转换为 Next.js。

Next.js 应该从 AWS 加载图像，但这不会发生。为什么？

几天前它工作了。你认为这是一些缓存问题还是什么？

你有什么想法吗？

在 Next.js 中，应用程序从这个本地 URL 加载图像：

http://localhost:3000/_next/image?url=https%3A%2F%2Fticket-t01.s3.eu-central-1.amazonaws.com%2Fob8h_0.cover.jpg&w=1200&q=100

next.config.js：

1 图片标签：

在 React 中，AWS 或图像加载没有问题。

编辑

尝试访问图像时的 console.log：

我正在使用 Next.js 和Image组件。我的问题是当我调整窗口大小时，我的图像不会保持居中。

我试过自动边距，显示 flex 并对齐内容并对齐内容居中，对象适合和对象位置。

我还尝试了Image组件的所有布局选项。

当我调整到更大的窗口或高度保持不变但宽度变宽时，图像的顶部会被裁剪，因此比例不会保持不变。

（我将代码简化为图像）

CSS：

我的Home页面通过我的strapicms 将数据发送到我的PostSlider组件props

然后我的 postSlider 组件映射数据以填充我的滑块

我确保在其中包含我的 CDN 地址，module.exports但next.config.js出现以下错误

错误：图像缺少必需的“src”属性。确保将 props 中的“src”传递给next/image组件。收到：{“宽度”：376，“高度”：190}

如果我删除next/image普通标签的组件img，一切正常。

我究竟做错了什么？

我们react-responsive-carousel在我们的Next.js项目中使用。当我们替换img为Image优化缩略图图像大小时，缩略图消失了。你知道为什么吗？

我正在尝试将 Next.js<Image>组件与该layout=fill选项一起使用。因此我创建了一个relative div包含Image标签的。但我想通过图像高度来确定高度。

找到了这个例子，但高度是在那里静态给出的。因此，我根据示例进行了尝试。

我也尝试过h-fullormax-h-full类而不是h-标签，但没有成功。

如何自动确定其高度？

我只使用 Next.js 中的下一个/图像。有没有办法只安装 next/image 模块而不是整个 Next.js 模块。我尝试执行以下操作 -

但是在执行 npm install 之后，我收到以下错误 -