Next.js组件中如何动态渲染SVG图片？卡片图片不显示如何解决

• 路径配置错误
  Next.js 所有静态资源必须存放在项目根目录的public文件夹下才可以通过根路径直接访问，你配置的/images/faq_customer/step_1.svg对应的实际存放路径必须为public/images/faq_customer/step_1.svg，如果images文件夹放在了src、app等其他目录下，会直接返回404无法加载。
  你可以先打开浏览器开发者工具的「网络」面板，刷新页面查看SVG资源的请求状态，如果返回404优先排查该问题。
• 直接使用原生<img>标签不符合Next.js资源加载规则
  Next.js 13及以上版本默认启用静态资源优化策略，原生<img>标签加载本地SVG资源可能被拦截，建议替换为官方内置的next/image组件：
  首先导入组件：

  import Image from 'next/image'
  

  替换卡片组件内的img标签：

  <Image src={img} alt="步骤图示" width={120} height={120} />
  

  注意必须配置明确的width和height属性，避免触发布局偏移报错。
• SVG文件本身存在语法问题
  检查你的SVG文件是否存在未闭合标签、宽高属性设为0、引用了外部字体/资源的情况，部分设计工具导出的不规范SVG会被浏览器拒绝渲染，你可以直接在浏览器地址栏输入SVG的完整路径测试是否能单独打开。
• 图片优化规则限制
  如果确认路径、组件使用都没问题，可在next.config.js中配置关闭图片优化：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      unoptimized: true,
    },
  }
  module.exports = nextConfig
  

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