问题标签 [nextjs-image]

默认 URL 结构是 http://localhost:5000/_next/image?url="someURL"。

我希望 URL 类似于http://localhost:5000/demo/_next/image?url="someURL"。

这可以通过

在这里，找不到目录指向的_next/image 。

在此之后，所有的图像都给 404。我需要在下一个 js 中解决这个问题。

我正在使用 NextJS 和 Tailwind 构建一个电子商务项目。我正在使用 Next 的 Image 组件来显示产品图片，但是当我尝试在 Image 上使用 Tailwind 的悬停效果时，没有任何反应。

好吧，并不是所有的悬停效果都有问题。尝试更改不透明度效果很好，但尝试在悬停时使用缩放或倾斜没有影响。

其他人有同样的问题吗？如果是这样，您是否设法找到解决方法？

提前致谢。

文档说：

图像的宽度，以像素为单位。必须是没有单位的整数。图像的高度，以像素为单位。必须是没有单位的整数。

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

不同的设备可以有不同的尺寸。设备可以是台式机或移动设备。发送每张图片的实际尺寸有点繁琐。

我想我不必发送图像的确切尺寸，但发送的宽度、高度的比例与实际宽度和高度的比例相等就足够了。你是否同意我的观点？

所以如果我看这个商人：

https://tiket.hu/sell/services

桌面上的商人有一个 468x346 尺寸，那么如果我通过，width={100} height={74}那么返回的图像将具有最佳尺寸。正确的？加载速度也将是最佳的。

从版本 10 开始，Next.js 带有内置Image组件，该组件提供图像优化和响应式调整图像大小的功能。我非常喜欢它，我一直在我的网站上使用它来制作固定尺寸的图像。根据官方文档，除非是 for ，否则 width 和 height 是必需的道具layout=fill。

Image现在，即使我事先不知道宽度和高度，我也想使用组件。我有来自 CMS 的博客资源，其中图像的确切大小未知。在这种情况下，有什么办法可以使用Image组件吗？

任何帮助，将不胜感激。

我正在尝试在不导入 React 和 ReactDom 的情况下创建视差效果。我正在使用基本的 html 和 css 来构建这个视差。我别无选择，只能使用：

如何创建这种视差效果？这是我的代码：页面文件夹-> index.js

样式文件夹-> global.css

样式文件夹-> Home.module.css

这个基本的 html 和 css 可以轻松创建创建视差背景所需的最低要求。出于某种原因，当我添加此代码时，NextJS 似乎不起作用。你能告诉我这里有什么问题吗？

在我的 Next.js 应用程序中，我懒惰地加载了一些带有内置<Image />组件的图像。这些图像中的大多数都是 SVG。它运作良好，但问题是我需要手动硬编码每个图像的宽度和高度，因为这个组件需要两个维度。计算纵横比需要做很多额外的工作，我确信有一种方法可以优化我的工作流程。

我希望能够为每个图像提供宽度或高度，缺少的尺寸是从图像文件本身计算出来的。随着 Next.js 编译结果，应该是可以的。

是否有编译图像尺寸的内置方法？

ReactJS 和 NextJS 的新手，想知道是否可以在 NextJS 中将 JavaScript 添加到 HTML 类名。例如，尝试创建视差效果需要通过 npm 安装某个包才能使视差工作。

示例问题：如何向此图像代码添加 javascript 效果？

所以我的问题是如何添加以下代码以使我的 javascript 效果起作用：

为什么 NextJS 中的 Image 组件内部的样式不允许我操作我的图像。我错过了什么吗？

我的nextjs应用程序中有一个反应组件，它使用next/image：

在 linesrc={'http://backend${image.url}'}中，backend是 kubernetes 服务的名称，通过它可以将图像用于nextjs微服务。

当我部署它时，微服务在渲染组件nextjs时崩溃（没有错误） 。<Image />（没有<Image />渲染的页面没有任何问题。）

我不知道原因，但pod重新启动nexjs容器。我检查kubectl top pod了是否是因为资源限制，但没有发现 CPU/RAM 限制。

映像位于预配置的 Kubernetes 卷中。有两个nginx微服务为图像提供服务：

1. 其中之一将图像提供给世界，例如网络浏览器可以请求这样的图像：（/media/images/image-1.jpg效果很好。）

2. 另一个将图像提供给nextjs微服务。它包括一个名为backend. 例如在nextjs容器中可以像这样请求图像：

   <Image src={'http://backend${image.url}' ... />

当我关闭图像优化 ( unoptimized={true}) 并更改src从 Web 浏览器（而不是nextjs微服务）获取图像时，一切正常：

我想要图像优化功能。如何处理这个问题。提前致谢！

更新

有没有办法在微服务中做到"http://backend/media/image-1.jpg"平等？那么这将得到解决？"/media/image-1.jpg"nextjs"/media/image-1.jpg""http://backend/media/image-1.jpg"

我有一个要部署到 Heroku 的 Next.js 应用程序。当我在本地开发时，我看到了图像，但是当我推送到 Heroku 并检查站点时，图像有 404。我有一个公用文件夹，其中我的文件夹中有图像（.png），以及我引用的代码像这样的图像

在本地和产品中，如果我查看图像源它们是相同的src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75"，但我在产品中得到 404。什么可能导致图像显示 localhost 但不在 Heroku prod build 中？

包.json

文件结构