设置加载器配置路径时在 Next.js 项目文件夹中获取公共图像资产答案

【问题标题】：Getting public image asset in Next.js project folder when loader configuration path is set设置加载器配置路径时在 Next.js 项目文件夹中获取公共图像资产
【发布时间】：2021-12-22 18:22:36
【问题描述】：

上下文

我已经启动了一个 Next.js 项目，需要从两个不同的来源获取图片资源：

在存储库的本地公用文件夹中：<Image src="/logo.png" width={50} height={50} alt='Logo' layout="fixed"/>
来自云提供商的资产 (Cloudinary)：<Image src="<transformations>/<version>/<public_id>.jpg" width={400} height={400} alt='Planning garden image'/>

问题

在next.config.js 文件中设置图像路径时，原本要从公共文件加载的图像现在指向 Cloudinary。

图片加载器路径设置in the Next.js configuration file:

// next.config.js

module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/<cloud_name>/image/upload',
  },
}

这意味着上面的 1. 还使用 Image src 的相对 URL，并将其与 config 文件夹中的路径放在前面。这对于存储在公用文件夹中的图像是不正确的 - 如果未设置 Cloudinary 的配置，这将是默认路径。

我可以根据使用它们的上下文来拥有来自不同来源的图像路径吗？我不想将所有图像都放在 Cloudinary 上。我希望 1 仍然来自公用文件夹。

【问题讨论】：

您可以导入本地图像，例如从“./logo.png”导入徽标。这是来自下一个nextjs.org/docs/basic-features/image-optimization 的链接另外，尝试在中使用 loader 属性来覆盖在 next.config.js nextjs.org/docs/api-reference/next/image#configuration-options
不幸的是，这些都不起作用。从./logo.png 导入徽标只是将其添加到图像配置路径的末尾。像这样指定加载器是行不通的，它需要一个函数；当给它一个返回它的函数时，它不起作用。也许如果这能以某种方式插入 Next.js 的普通加载器函数，但我不知道那会是什么样子。
刚刚发现这个与我类似的未回答问题：stackoverflow.com/questions/67985068/…
`/${src}``} src="logo.png" layout="fill" />

标签： reactjs next.js

【解决方案1】：

关键信息是：“加载器可以在每个图像中定义，或者在应用程序级别。”

在应用程序级别设置加载器配置以便可以使用基于云的图像优化，以使本地图像工作覆盖其加载器配置。

作为杰瑞showed how to do in the comment: <Image loader={({src})=> src} src="/logo.png" layout="fill" />

【讨论】：