# Next.js 图片域名配置修复总结

## 问题描述

在使用 Next.js 的 `Image` 组件加载外部图片时，出现以下错误：

```
hostname "oss.wsdns.cn" is not configured under images in your `next.config`
```

## 解决方案

### 1. 修改 `next.config.ts` 文件

在 Next.js 配置文件中添加了 `images.remotePatterns` 配置：

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      // OSS 图片域名
      {
        protocol: 'https',
        hostname: 'oss.wsdns.cn',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'http',
        hostname: 'oss.wsdns.cn',
        port: '',
        pathname: '/**',
      },
      // API 服务器图片
      {
        protocol: 'https',
        hostname: 'cms-api.websoft.top',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'http',
        hostname: 'cms-api.websoft.top',
        port: '',
        pathname: '/**',
      },
      // 常见的图片 CDN 域名
      {
        protocol: 'https',
        hostname: '*.aliyuncs.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.qiniudn.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.qiniu.com',
        port: '',
        pathname: '/**',
      },
      // 本地开发
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'localhost',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;
```

### 2. 配置的域名列表

已配置的图片域名包括：

#### 主要业务域名
- `oss.wsdns.cn` - OSS 存储域名（HTTP/HTTPS）
- `cms-api.websoft.top` - API 服务器图片（HTTP/HTTPS）

#### 常见 CDN 域名
- `*.aliyuncs.com` - 阿里云 OSS
- `*.qiniudn.com` - 七牛云 CDN
- `*.qiniu.com` - 七牛云新域名

#### 开发环境
- `localhost` - 本地开发（HTTP/HTTPS）

### 3. 重启服务器

修改 `next.config.ts` 后需要重启开发服务器：

```bash
# 停止当前服务器 (Ctrl+C)
npm run dev
```

## 修复效果

### ✅ 已解决的问题

1. **外部图片加载**：现在可以正常加载来自 `oss.wsdns.cn` 的图片
2. **API 图片支持**：支持从 `cms-api.websoft.top` 加载图片
3. **CDN 兼容性**：支持常见的 CDN 域名
4. **开发环境**：支持本地开发时的图片加载

### ⚠️ 注意事项

1. **404 错误正常**：日志中的 `/hero-image.jpg`、`/about-image.jpg` 等 404 错误是正常的，因为这些本地图片文件不存在
2. **Tailwind 警告**：`px-6` 等 Tailwind 类的警告不影响图片功能
3. **配置生效**：服务器已自动重启并应用了新配置

## 使用示例

现在可以在组件中正常使用外部图片：

```tsx
import Image from 'next/image';

function ArticleImage({ article }) {
  return (
    <Image
      src={article.image || '/placeholder.jpg'} // 支持 oss.wsdns.cn 域名
      alt={article.title || '文章图片'}
      width={400}
      height={200}
      className="article-image"
    />
  );
}
```

## 安全考虑

1. **最小权限**：只配置了必要的域名
2. **协议支持**：同时支持 HTTP 和 HTTPS
3. **路径限制**：使用 `/**` 允许所有路径（可根据需要进一步限制）

## 相关文档

- `docs/IMAGE_DOMAINS_CONFIG.md` - 详细的图片域名配置说明
- [Next.js Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)

## 状态

✅ **已完成** - 图片域名配置问题已解决，外部图片可以正常加载