2

I'm using Gatsby 4.19.2 along with gatsby-source-wordpress (see package dependencies below).

I've also tried upgrading to 4.24.7 with same results. (I'd rather not go to version 5 yet unless someone thinks there's a fix waiting there.)

Here's the problem:

When I create an HTML document in Wordpress with an img tag that references an SVG image, Gatsby does download the SVG at build time and includes an img tag in the rendered HTML with a src attribute that looks like this:

src="http://localhost:8000/_gatsby/file/718a00c21d0abe3c19953fa033ba7695/PackingMaterials.svg?u=https%3A%2F%2Ftest2.rc.com%2Fwp%2Fwp-content%2Fuploads%2F2022%2F12%2FPackingMaterials.svg"

This does not render correctly in Chrome but does render in Firefox. Running wget on that link does download the correct SVG.

I believe the problem is that Gatsby is not setting the Content-Type header in the HTTP GET response when the browser retrieves the SVG file. Since there's no Content-Type, Chrome throws up it's hands and renders a broken image icon.

This happens with both "gatsby develop" and "gatsby build; gatsby serve".

Questions:

  • Any ideas how to fix this with existing Gatsby/plugin option settings?

  • Or, any ideas where in the Gatsby source code I should start looking to identify the source of the problem and fix it?

My current package depedencies:

 "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"
  }

I've tried using .jpeg images instead of .svg and found that Chrome does render the .jpeg's even though the Content-Type header is not set. But it refuses to render the SVG images.

I've tried upgrading to Gatsby 4.24.7 with same results.

** UPDATE: To test my theory about Content-Type I hacked my way into my project's node_modules/gatsby/dist/utils/start-server.js and added this code at around line 176, a few lines below the comment that says "Set up the express app":

  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();
  });

And sure enough the SVG images started rendering correctly in Chrome.

So now the problem is how to solve this properly in Gatsby codebase (or using some existing solution such as a plugin that correctly sets Content-Type). Any guidance on that front appreciated. I suppose I'll go open an issue over at the Gatsby github repo.

vulcan
  • 706
  • 5
  • 8

1 Answers1

0

Still not a permanent fix, but easier than hacking into node_modules:

gatsby-config.js

module.exports = {
  developMiddleware: app => {
    app.use((req, res, next) => {
      if (req.path.endsWith('.svg')) {
        res.header('Content-Type', 'image/svg+xml');
      }

      next();
    });
  },
};
Matt
  • 1