Gatsby+无头WordPress站点Chrome无法渲染SVG的问题求助

问题背景 #

当前使用Gatsby 4.19.2搭配gatsby-source-wordpress插件，升级至4.24.7后问题仍存在（暂不考虑升级到v5）。具体现象：在WordPress中创建含SVG图片的HTML文档，Gatsby构建时会下载该SVG，但生成的img标签在Chrome中无法渲染，Firefox可正常显示。通过wget能正确下载SVG，推测核心原因是Gatsby未在HTTP响应中设置image/svg+xml的Content-Type头，手动在node_modules/gatsby/dist/utils/start-server.js中添加代码设置头信息后，Chrome可正常渲染。

一、配置层面解决方案 #

1. 优化gatsby-plugin-react-svg配置 #

你已安装gatsby-plugin-react-svg，可调整配置让它处理从WordPress拉取的本地SVG资源。修改gatsby-config.js中的插件配置：

{
  resolve: "gatsby-plugin-react-svg",
  options: {
    rule: {
      include: /static\/wordpress\/.*\.svg$/ // 根据实际SVG存储路径调整
    }
  }
}

此方案将SVG转为React组件引入，绕开img标签的Content-Type限制。

2. 利用Gatsby Node API修正MIME类型 #

通过onCreateNode钩子，为下载的SVG文件强制设置正确的MIME类型：

exports.onCreateNode = ({ node }) => {
  if (node.internal.type === `File` && node.extension === `svg`) {
    node.mimeType = `image/svg+xml`;
  }
};

也可在使用gatsby-plugin-image渲染时，手动为img标签添加type="image/svg+xml"属性。

3. 部署端配置MIME类型映射 #

若为部署后问题，可在托管平台配置中添加SVG的MIME类型映射。例如Netlify的netlify.toml：

[[headers]]
  for = "*.svg"
  [headers.values]
    Content-Type = "image/svg+xml"

二、源码层面修复方向 #

1. 定位静态资源MIME映射逻辑 #

Gatsby处理静态资源的核心逻辑位于packages/gatsby/src/utils/start-server.js（对应你修改的dist版本文件），需找到静态文件服务的MIME类型映射表，确认是否遗漏svg对应的image/svg+xml。

2. 检查文件类型检测逻辑 #

Gatsby可能依赖file-type等库自动检测文件MIME类型，部分SVG可能因格式问题被误识别。可在源码中找到类型检测的代码块，添加SVG的强制映射规则。

3. 修复静态服务中间件配置 #

在start-server.js的express.static配置中添加setHeaders选项，为SVG文件设置正确的Content-Type：

app.use(express.static(path.join(__dirname, `../public`), {
  setHeaders: (res, path) => {
    if (path.endsWith(`.svg`)) {
      res.setHeader(`Content-Type`, `image/svg+xml`);
    }
  }
}));

依赖清单 #

"dependencies": {
  "@wordpress/block-library": "^7.0.2",
  "autoprefixer": "^10.4.2",
  "gatsby": "^4.19.2",
  "gatsby-plugin-google-analytics": "^4.19.0",
  "gatsby-plugin-google-tagmanager": "^4.19.0",
  "gatsby-plugin-image": "^2.19.0",
  "gatsby-plugin-postcss": "^5.19.0",
  "gatsby-plugin-react-helmet": "^5.19.0",
  "gatsby-plugin-react-svg": "^3.1.0",
  "gatsby-plugin-sass": "^5.19.0",
  "gatsby-plugin-scroll-reveal-with-new-react": "0.0.8",
  "gatsby-plugin-sharp": "^4.19.0",
  "gatsby-plugin-typography": "^4.19.0",
  "gatsby-plugin-wpgraphql-seo": "^1.4.1",
  "gatsby-source-filesystem": "^4.19.0",
  "gatsby-source-wordpress": "^6.19.0",
  "gatsby-transformer-sharp": "^4.19.0",
  "postcss": "^8.4.14",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-helmet": "^6.1.0",
  "react-multi-carousel": "^2.8.2",
  "react-typography": "^0.16.20",
  "sass": "^1.54.0",
  "tailwind": "^4.0.0",
  "tailwindcss": "^3.1.6",
  "typography": "^0.16.21"
},
"devDependencies": {
  "@types/node": "^17.0.14",
  "@types/react": "^17.0.38",
  "@types/react-dom": "^17.0.11",
  "@types/react-helmet": "^6.1.5",
  "typescript": "^4.5.5"
}

临时测试代码 #

app.use(async (req,res,next) => {
  console.log('Processing req ',req.originalUrl);
  if (req.originalUrl.includes(".svg")) {
    res.header('Content-Type', 'image/svg+xml');
  }

  next();
});

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