Next.js中使用next/image动态加载SVG报错：需更换渲染方式

问题原因 #

出现该错误主要有两个核心原因：

• map函数语法错误，参数未用括号正确包裹
• Next.js Image组件处理本地静态图片时，动态传入src需显式指定尺寸信息（width/height）或使用fill模式

修正步骤及代码示例 #

1. 修正HomeComponent中的map语法错误
   原代码中ImageList.map(eachItem, index)=>缺少参数括号，正确写法应为ImageList.map((eachItem, index)=>

2. 给Image组件添加必要的尺寸配置
   Next.js的Image组件要求本地图片必须明确尺寸，以下提供两种可行方案：

方案一：显式指定width和height

// HomeComponent.js 修正后
import Image1 from '@/public/fig1.svg'
import Image2 from '@/public/fig2.svg'
import Image3 from '@/public/fig3.svg'
import ImageComponent from './ImageComponent'

const ImageList = [
  {src: Image1, text: 'item1'},
  {src: Image2, text: 'item2'},
  {src: Image3, text: 'item3'},
];

export default function HomeComponent () {
  return (
    <>
      {ImageList.map((eachItem, index) => (
        <ImageComponent key={index} src={eachItem.src} text={eachItem.text} />
      ))}
    </>
  )
}

// ImageComponent.js 修正后
import Image from 'next/image';

export function ImageComponent ({src, text}) {
  return (
    <div style={{margin: '1rem'}}>
      <Image 
        src={src} 
        alt={text} 
        width={200}  // 根据实际需求调整尺寸
        height={200} // 根据实际需求调整尺寸
        objectFit="contain"
      />
    </div>
  )
}

方案二：使用fill模式（适合响应式场景）

通过fill属性让图片填充父容器，需确保父容器设置相对定位：

// ImageComponent.js 修正后
import Image from 'next/image';

export function ImageComponent ({src, text}) {
  return (
    <div style={{position: 'relative', width: '100%', height: 300, margin: '1rem'}}>
      <Image 
        src={src} 
        alt={text} 
        fill 
        objectFit="contain"
      />
    </div>
  )
}

额外说明 #

• 若使用Next.js 13+ App Router，确保Image组件导入自next/image而非next/legacy/image
• 若加载远程图片，需在next.config.js中配置domains字段允许对应图片域名

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