问题标签 [nextjs-image]

我正在尝试将 Next.js 图像优化与外部加载程序一起使用。我不知道为什么以下不起作用

但是，如果我对它的值进行硬编码。这是在 Heroku 上并process.env.IMAGE_LOADER_URL在日志中记录显示的值。

我正在我的 Headless 项目中实现 Next.js Image 组件。我使用的 CMS 是 WordPress。由于图像来自外部网站，因此我需要在 上指定域next.config.js，如文档所述：

https://nextjs.org/docs/basic-features/image-optimization

但在我的next.config.js文件中，我已经有了这个配置：

所以我的斗争是将这两者结合在配置文件中。

只是在某些情况下，没有图像配置，我有这个错误：

错误：无效的 src 属性next/image，主机名未在您的图像下配置next.config.js

我尝试将它放在一起，就像使用下面的代码一样next-compose-plugins，但错误一直显示：

如果没有 module.exports 末尾的 nextConfig，代码可以正常工作。

我需要传递的 URL 的一个细节是它是一个子域和一个同源环境，但它不需要访问凭据。我不认为这是问题。

由于我是 Next.js 的新手，所以我无法弄清楚这个配置需要如何工作。

我正在使用 Next.js 10.0.7 和 next-images 1.7，大图像需要几秒钟才能出现。

我正确使用了组件，您可以在下面看到，但我认为我的问题有解决方案。

一些问题：

• 如果我将所有图像转换为 .webp 图像会显示得更快吗？
• 这个问题有解决方案吗？

我可以将“下一个/图像”中的元素图像放入{ position: absolute; left: 50% }吗？似乎没有受到影响。

例子：

我想在下一个 js 中使用动态链接Image。下一个 Js 建议

但我想使用喜欢

图像将来自 api，因此图像 src 每次都会改变。我不能在下一个 js 图像中使用链接，可以在下一个 js 图像中使用链接吗？

我有一个@svgr/webpack安装了库的 Next.js 站点。我已配置next.config.js为使用@svgr/webpack，现在想要导入 svg 图像并将其与新next/image组件一起使用。

这是我设置next.config.js文件的方式：

这就是我想要做的：

但是，当我这样做时，我收到以下错误：

我认为也许我应该将 Logo 组件作为一个实际组件包含在内，如下所示：<Image src={<Logo />} width={174} height={84} />

然而，这也没有奏效。

知道出了什么问题以及如何解决吗？

我正在使用最新版本的 NextJS 10.0.9。我有一个我试图显示的图像，但是我收到了错误：

正如您在此处看到的，我确实设置了所有这些属性：

出于某种原因，使用默认外部图像似乎不想与 Image 组件很好地配合使用。有谁知道解决方法或可能出现这种情况的原因？

还有一点旁注：我在layout属性上有一个 Typescript 错误，上面写着“Type '"fill"' is not assignable to type '"fixed" | "intrinsic" | "responsive" | undefined'."。我不确定这是否相关？

这是我目前的设置。

我想添加此代码以允许来自域的图像localhost:3001。

使用此代码：

返回此错误

没有_document.js：

问题出在哪里？

最近，我一直在 NextJS 的一个项目中工作，它使用 YoutubeAPI 来获取视频信息，包括缩略图 URL。

全分辨率图像的缩略图 URL 如下所示： https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg

但是，有时 YouTube 无法生成全分辨率图像，在这种情况下，图像不会显示在我的网页上。

如果带有 URL 的图像https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg不存在，我希望使用另一个 URL，例如https://i.ytimg.com/vi/${videoId}/hqdefault.jpg

处理此问题的最佳方法是什么next/image？