Next.js新闻聚合站：随机图片域名下能否使用Image组件？

你完全不用退回到基础img标签，有两种方案可以继续使用Next.js的Image组件：

1. 允许所有远程域名（谨慎使用） #

在next.config.js里配置remotePatterns，允许所有HTTP/HTTPS域名的图片：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*',
      },
      {
        protocol: 'http',
        hostname: '*',
      },
    ],
  },
}

module.exports = nextConfig

注意：这种做法会跳过Next.js对图片来源的安全校验，存在一定风险；同时因为域名完全随机，Next.js无法提前缓存图片优化资源，会损失部分性能优化能力。

2. 开启无优化模式 #

使用Image组件的unoptimized属性，让Next.js跳过图片优化流程，直接渲染类似原生img的效果，但保留Image组件的布局特性：

import Image from 'next/image'

export default function NewsItemImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={600}
      height={400}
      unoptimized
    />
  )
}

这个方案不用配置任何域名，缺点是失去了Next.js的自动图片格式转换、响应式尺寸适配等优化功能，图片加载性能和原生img标签一致。

如果以上两种方案都不符合你的需求，再考虑使用基础img标签，但需要自己手动处理响应式布局、懒加载等性能优化点。

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