如何在Next.js中使用next/image实现Slug化图片URL？

域名选择说明 #

• 若需要Next.js提供图片优化（自动裁剪、格式转换、缓存），选http://localhost:3000/uimages/[slug]，由Next.js代理处理图片请求。
• 若无需Next.js优化，直接从后端服务获取图片，选http://127.0.0.1:8000/uimages/[slug]。
• 数据库中存储的https://mydomain.ua/uimages/[slug]为生产环境域名，本地开发时替换为对应本地服务前缀即可。

方案一：自定义next/image Loader #

适合保留next/image优化能力，同时生成slug化URL的场景，需结合路径重写处理实际图片映射。

实现代码 #

1. 组件内自定义Loader

const imageLoader = ({ src, width, quality }) => {
  // 替换生产域名为本机Next.js服务地址
  const localSrc = src.replace('https://mydomain.ua', 'http://localhost:3000');
  // 拼接图片优化参数
  return `${localSrc}?w=${width}&q=${quality || 75}`;
};

// 使用next/image组件
<Image
  loader={imageLoader}
  src={item.slug_url} // 从数据库读取的slug化URL
  alt="商品图片"
  width={1920}
  height={1080}
/>

2. 配置静态重写（next.config.js）
   若slug与实际图片路径有固定规则（比如slug包含图片ID），可在next.config.js中添加重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/uimages/:slug',
        // 假设slug格式为xxx-[id]s.jpg，提取id后拼接实际路径
        destination: 'http://127.0.0.1:8000/media/uimages/0481/:id.s.jpg',
        regex: /^uimages\/.+?-(\d+)s\.jpg$/
      }
    ];
  }
};

module.exports = nextConfig;

方案二：Middleware动态重写 #

适合需要动态查询数据库映射slug与实际图片路径的场景，统一处理所有图片请求，无需修改每个next/image组件。

实现代码（Next.js 13+ App Router） #

在项目根目录创建middleware.js：

import { NextResponse } from 'next/server';

// 模拟从数据库查询图片实际地址的函数
async function getImageBySlug(slug) {
  // 替换为你的数据库查询逻辑
  if (slug === 'kreplenie-dvertci-shpil_ka-tverdotoplivnogo-kotla-2408696s.jpg') {
    return 'http://127.0.0.1:8000/media/uimages/0481/2408696.s.jpg';
  }
  return null;
}

export async function middleware(request) {
  const { pathname, searchParams } = request.nextUrl;

  // 拦截/uimages开头的请求
  if (pathname.startsWith('/uimages/')) {
    const slug = pathname.slice('/uimages/'.length);
    const actualImageUrl = await getImageBySlug(slug);

    if (!actualImageUrl) {
      return new NextResponse('图片不存在', { status: 404 });
    }

    // 重写到next/image优化地址，保留参数
    const nextImageUrl = new URL('/_next/image', request.nextUrl.origin);
    nextImageUrl.searchParams.set('url', actualImageUrl);
    nextImageUrl.searchParams.set('w', searchParams.get('w') || '1920');
    nextImageUrl.searchParams.set('q', searchParams.get('q') || '75');

    return NextResponse.rewrite(nextImageUrl);

    // 若无需优化，直接重写到后端图片地址
    // return NextResponse.rewrite(new URL(actualImageUrl));
  }

  return NextResponse.next();
}

// 配置匹配规则
export const config = {
  matcher: '/uimages/:path*'
};

使用next/image组件 #

直接传入数据库中的slug化URL（替换成本地前缀）：

<Image
  src="http://localhost:3000/uimages/kreplenie-dvertci-shpil_ka-tverdotoplivnogo-kotla-2408696s.jpg"
  alt="商品图片"
  width={1920}
  height={1080}
/>

方案对比 #

• 自定义Loader：适合静态路径映射场景，组件级定制灵活，但需维护重写规则。
• Middleware：适合动态路径映射（依赖数据库查询），全局统一处理，无需修改组件，维护成本更低。

内容的提问来源于stack exchange，提问作者Serhii