问题标签 [next-images]

next/image导致服务器关闭错误 502 网关错误。

我从 devtool 网络检查，它去获取第三方 ( themoviedb ) api。这些图像无法正确加载，但它在我的本地机器中的 nextJs 内置图像组件中运行良好。

我尝试使用纯 html 标签来加载这些图像，这个 502 网关错误得到了解决。

是否有任何线索说明为什么next/image会导致我的 DO 服务器 502 网关错误？

next build如果在本地运行+ ，像 png 这样的图像会成功显示在应用程序上，next start但在通过 server.js 和 web.config 将其部署到 Azure Web App 后，图像不再加载。

我有我的图像public/imgs/logo.png ，我像这样引用它： <Image src={'/imgs/logo.png'} height={'20px'} width={'180px'} />

我什至尝试在构建完所有内容并且仍然加载图像后server.js直接运行（ ）。node server.js但是，一旦我在 Azure Web App 中上传构建文件（.next 文件夹）、web.config 和 server.js，图像就不再加载。

请帮忙。以下是我用来设置的一些文件。

服务器.js

网络配置

next.config.js

我正在 Next.js 中创建一个网站。我使用<Image />标签将图像放置在网站中。我只在移动视图中在图像组件中得到一些空白，但在桌面上它很好，当我签入网络标签时，我得到了 svg+xml这样的文件<img alt aria-hidden="true" src='data:image/svg+xml base 64'>。我认为这svg+xml 在图像中创造了空白？谁能帮我这个？如何删除此svg+xml文件？

这是我用于图像的 html 代码：

scss：

scss代码图片

当我长按移动视图中的空白时显示这个

当我将<img />标签用于图像目的时，这个空白不会出现，只有当我使用这个 nextjs<Image />标签时，我才会得到空白

我正在使用 next/image 来渲染我的图像，如下所示：

这适用于 750 像素以上的屏幕宽度。

当用户在手机或平板电脑上访问时（低于 750px 屏幕宽度），如何将高度更新为“612”？

我一直在使用 plaiceholder 获取 base64 转换后的图像，以便在 next/Image 组件中传入 blurDataUrl。

这里我有两个问题：

1. 我想保持这个imagePath动态，以便我可以在 blurDataUrl 中相应地传递多个图像和 url
2. 当我使用它时，它给出了fs not found

卡了好久，求帮助

我正在开发一个 shopify 应用程序。我使用 shopify 文档开始了这个项目。Shopify CLI：https ://shopify.dev/apps/tools/cli/getting-started 问题是由于某种原因 webpack 未配置为处理 png 文件。我无法编译该项目。

错误信息：./pages/logo.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

我尝试添加文件加载器并将其添加到配置中，但应用程序崩溃了。任何人都可以在这里帮忙吗？

next.config.js：

我希望能够在next/image. 想法是用于next.config.js：

而不是'customLoader'可能是'default'，，'imgix'或'vercel'其他任何东西。我希望代码从中获取加载器config并确定它是内置加载器还是自定义加载器。在内置加载器的情况下，只需使用该加载器，但是在自定义加载器的情况下，转到imageLoaders文件，该文件将具有所有自定义加载器的列表+功能并根据其名称检索加载器。有没有可能实现？

为什么我使用 Image 组件显示的图像加载时间比我使用 img 标签显示的要长得多？我的图片是 webp 格式的。在截图https://ibb.co/jLsnLd4中，底部的两个链接只是一个 img 标签，然后是一些等待和 next/image 加载图像。也许是因为延迟加载功能是这样实现的？Image 组件使用钩子 useIntersection: https://github.com/vercel/next.js/blob/52139a41e90b668aa7e393c18990f1d1f5db9e22/packages/next/client/image.tsx#L10 然后这个钩子使用IntersectionObserver: https://github.com/ vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/packages/next/client/use-intersection.tsx#L89 或者可能是因为 Image img 组件总是解码="async"？https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding这会以任何方式影响下载速度吗？你有什么建议吗？

当我想导出我的 nextjs 应用程序时，它说我无法在静态网站上导出我的图像。

错误：使用 Next.js 的默认加载器的图像优化与next export. 可能的解决方案： -next start用于运行包含图像优化 API 的服务器。- 使用任何支持图像优化的提供商（如 Vercel）。- 配置第三方加载器next.config.js。- 使用loader道具next/image。

我怎样才能做到这一点？

有没有办法让我简单地告诉它静态渲染图像？我不想通过其他在线图像加载器..

我收到此错误：

错误：图像缺少 src 属性。

我不确定出了什么问题，因为它与我拥有的代码一起使用。在我关闭 vscode 并再次打开它之后，错误发生了。这是我的代码：

导航栏.js

下一个配置.js