Next.js12搭配Material UI5使用Image标签无法显示图片怎么办

按以下优先级逐一排查修复即可：

• 静态资源路径校验
  Next.js 12 约定所有可直接通过路由访问的静态资源必须存放在项目根目录的public文件夹下，你代码中写的/images/Profile.svg对应的物理路径必须是项目根目录/public/images/Profile.svg。如果图片被放在src/images、pages/images等其他目录，框架无法识别对应路由，会直接返回404导致图片加载失败。

  注意：文件名和路径的大小写必须和实际文件完全匹配，本地Windows/macOS开发环境默认大小写不敏感，部署到Linux生产环境会直接触发资源404。

• 组件属性适配
  Next.js 12 搭载的是v12版本的next/image组件，该版本组件要求显式声明layout属性匹配宽高设置，未声明时部分场景下会出现资源加载逻辑异常。你写死了300*160的固定宽高，加上layout="fixed"属性即可，修正后的代码如下：

  import Box from '@mui/material/Box';
  import Image from 'next/image';
  
  <Box display="flex" alignItems="center">
    <Image
      src={'/images/Profile.svg'}
      alt={'Thumbnail-alt'}
      width={300}
      height={160}
      layout="fixed"
      style={{ background: '#252525e6', borderRadius: '6px' }}
    />
  </Box>
  

• 配置文件校验
  如果你使用的是存放在远程服务的图片，需要在项目根目录的next.config.js中配置图片域名白名单，未配置的情况下框架会直接拦截图片加载请求。本地public目录下的资源不需要做该项配置，配置示例如下：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    images: {
      domains: [], // 在此处填写远程图片的域名，不要加协议头和斜杠
    },
  }
  
  module.exports = nextConfig
  

  修改配置文件后必须重启Next.js开发服务，配置才会生效。

• 补充方案：SVG属于矢量格式，不需要Next.js自带的图片压缩、格式转换优化能力，这类场景直接使用原生<img>标签加载即可，完全不会触发组件的加载校验逻辑，也能正常适配MUI的样式设置。

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