所以最近我一直在尝试将一个反应项目转换为下一个，以及我必须如何使用下一个/图像组件，这有点坏了

出于某种原因，这给了我这个

由于某种原因，图像在边框之间有一个小填充

我检查过，没有边框，这只是 nextjs 的图像组件坏了。请全力帮助我已经尝试了这些解决方案，但这些都不起作用： 下一个图像不采用类属性 如何将 Tailwind CSS 与 Next.js 图像一起使用

谢谢 ：）

概述

为了优化我的网络应用程序，我正在从标准img标签过渡到 Next 的Image标签。虽然它对性能很有帮助，但让它做自定义效果和样式可能会令人沮丧。

问题

我正在尝试向 Next 添加视差效果Image。我以前能够添加视差库，但似乎没有与Image标签集成。

有没有办法在滚动到下一张图像时添加简单的视差效果？

我的尝试

1. 我尝试将动态 translateY 样式属性添加到Image标签本身，但浏览器似乎没有读取字符串插值。

这是您可以查看的 repl.it链接。

我有两个项目，它们在我的next.config.js文件中都有相同的代码：

但是，当您在 DOM 中查看时，您会注意到一个项目在其 imgsrc属性中将内联图像显示为 base64 字符串，而另一个项目显示的是指向静态文件的引用链接。

显示内联图像的项目是12.0.8next.js 的版本，显示静态文件链接引用的项目是 version 12.0.9。

知道如何让第二个项目在 base64 中显示内联图像吗？

你们知道什么可能导致这个错误吗？帮助将不胜感激。这个错误突然开始，不知道为什么。我找到的与该主题相关的任何来源也没有帮助，例如 npm clear cache 等。

我的一些图像组件；

--

所以我让我的网站使用 Next.js，似乎所有图像都被正确渲染。但是，某些图像无法呈现，当我转到浏览器 devtools 并看到控制台时，它显示 GET https://mydomain/_next/image?url=%2Fimages%2Fprogress%2Fcheck.svg&w=32&q=75 400错误。我在我的服务器上使用球童，我怀疑我应该调整我的球童以代理资产 url，但奇怪的是，只是一些图像引发了这个错误，而不是所有图像。我已经使用网站上正确呈现的图像检查了导入方法，但我看不出发生了什么问题，因为我认为我正确地导入了它。

我如何导入图片网址：

我如何渲染图像：

解决此问题的解决方法是什么？在 next.js 生产环境中提供资产的最佳方式是什么？

我正在学习 nextjs 和 tailwind css。

我想使用下一个/图像填充一半宽度。

但是，它使用全宽

这是我的代码，请告诉我..

我正在动态保存图像。图像存储在 NextJS 项目的公共文件夹中。

获取图像的路径是/public/upload/catalog/{imagename}

正如 NextJS 关于访问公共文件夹的文档中所说，我正在尝试通过路径获取此图像/upload/catalog/{imagename}

它在环境中完美运行development，但在production我无法访问图像。

Image 组件代码示例：