Nextjs Image 图片组件如何设置透明代理

[daddyLi]

<Image
                        alt="营业执照"
                        className="min-w-32 rounded-md object-cover" // aspect-square
                        height="4"
                        src={customer.businessLicense}
                        width="32"
                      />

因为部署环境需要通过一台代理服务器请求公网 cdn ，请问如何配置 nextjs 使得能够通过代理服务器获取图片资源，请有经验的 xd 帮忙解答下，感谢！

[yxSamsara]

1. 使用 Next.js 的 next.config.js 配置代理
借助 next.config.js 和 images 配置，您可以将图片加载代理服务器的 URL 。

配置示例：
javascript
复制代码
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['your-cdn-domain.com'], // 公网 CDN 域名
loader: 'custom',
path: '', // 使用自定义加载器时，需要将 path 设置为空
},
async rewrites() {
return [
{
source: '/_proxy/cdn/:path*', // 代理路径
destination: 'http://proxy-server-domain.com/:path*', // 代理服务器地址
},
];
},
};

module.exports = nextConfig;
domains: 添加您的公网 CDN 域名到允许的图片加载域名列表中。
rewrites: 将 /cdn 的请求重写到代理服务器地址。
2. 自定义图片加载器
您可以通过 Next.js 的 自定义图片加载器 配置如何加载图片。

自定义加载器示例：
在组件中使用自定义加载器：

javascript
复制代码
import Image from 'next/image';

const myLoader = ({ src, width, quality }) => {
return `http://proxy-server-domain.com/${src}?w=${width}&q=${quality || 75}`;
};

export default function Example() {
return (
<Image
loader={myLoader}
src="your-cdn-path/image.jpg" // CDN 图片路径
alt="Example Image"
width={500}
height={500}
/>
);
}
3. 通过环境变量配置代理路径
为了更灵活，可以在 .env.local 中定义代理服务器的路径，例如：

env
复制代码
NEXT_PUBLIC_PROXY_SERVER=http://proxy-server-domain.com
然后在 next.config.js 或加载器中使用：

javascript
复制代码
const proxyServer = process.env.NEXT_PUBLIC_PROXY_SERVER;

const myLoader = ({ src, width, quality }) => {
return `${proxyServer}/${src}?w=${width}&q=${quality || 75}`;
};