使用Next/image渲染SVG时出现Element type is invalid错误求助

你遇到的问题是因为Next.js默认会把import的SVG文件解析为React组件对象，但next/image的src属性需要的是图片路径字符串或StaticImageData类型，直接传入组件对象就会触发类型错误。以下是几种可行的解决方式：

1. 改用原生img标签渲染 #

如果不需要next/image的优化功能（比如自动格式转换、响应式缩放），直接用img标签是最简单的方案：

import React from 'react';
import { Paper } from '@mui/material';

import Img from '../../images/image.svg';

const ImagePage = () => {
    return (
        <div>
            <Paper>
                <img src={Img} alt="图片描述" />
            </Paper>
        </div>
    );
};

export default ImagePage;

若仍然报错，需修改next.config.js，配置webpack将SVG处理为静态资源：

module.exports = {
  webpack(config) {
    // 移除默认的SVG处理规则
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test?.test('.svg')) {
        return { ...rule, exclude: /\.svg$/ };
      }
      return rule;
    });

    // 添加新规则用file-loader处理SVG
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: 'file-loader' }],
    });
    return config;
  },
};

2. 调整next/image的使用方式 #

如果一定要用next/image，需确保传入的src是正确的路径字符串。将图片放到public目录下（比如public/images/image.svg），然后直接引用根路径：

import React from 'react';
import Image from 'next/image';
import { Paper } from '@mui/material';

const ImagePage = () => {
    return (
        <div>
            <Paper>
                <Image src="/images/image.svg" width={200} height={200} alt="图片描述" />
            </Paper>
        </div>
    );
};

export default ImagePage;

注意：next/image要求必须显式设置width和height，Next.js 13+也可使用fill属性配合父容器实现自适应。

3. 将SVG作为React组件渲染 #

如果需要对SVG进行自定义（比如修改颜色、添加动画），可以用@svgr/webpack将SVG转成React组件直接渲染：
首先安装依赖：

npm install @svgr/webpack

然后修改next.config.js：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

最后在组件中直接使用导入的SVG组件：

import React from 'react';
import { Paper } from '@mui/material';

import Img from '../../images/image.svg';

const ImagePage = () => {
    return (
        <div>
            <Paper>
                <Img width={200} height={200} />
            </Paper>
        </div>
    );
};

export default ImagePage;

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