gatsby-remark-images issue with pathPrefix

Created on 14 Jul 2017 · 4Comments · Source: gatsbyjs/gatsby

Gatsby version: 1.0.11
Node version: v7.10.0
OS version: 10.12.5 (Sierra)

First of all, great work on gatsby. I am seriously loving it and am so impressed!

I'm working on a personal blog with gatsby, and I'd like to host it at ROOT/blog, and I can use the pathPrefix option in gatsby-config.js as well as the --prefix-paths option from the CLI to get that working with the webpack assets.

_However_, I think the images paths generated via gatsby-remark-images are inherently not prefixed (i.e. /static/path/to/image.jpeg), and so those images won't work on the deployed site.

Just wanted a sanity check to make sure there isn't anything I'm doing wrong or missing!

If I'm correct, and this seems to be a deficiency with gatsby-remark-images, I'd love to contribute back with a PR and add this functionality, although I haven't done that yet. Think it makes most sense to either make a pathPrefix an option to the plugin, _or_ pick it up from the config!

Reproduction steps

Check out https://dschau.github.io/gatsby-remark-images-path-issue/sample-issue.html, which demonstrates the broken image link. The repo for the source code is here

Source

DSchau

Most helpful comment

I'm still having this issue in v2 -- Is there a new fix or workaround?

Thanks!

MurphyPone on 27 Apr 2019

👍3

All 4 comments

Also, for my blog I hacked around it with the following script run as a postbuild step. Seems like a similar approach could work, but it'd be nice if we can do it a bit more cleanly when we're working with the actual node(s)

const path = require('path');
const glob = require('glob-promise');
const cheerio = require('cheerio');
const fs = require('mz/fs');

const { pathPrefix } = require(path.resolve('./gatsby-config.js'));

const makeAbsolute = src => {
  if (src.match(/^\/static/) && pathPrefix !== '/') {
    return `${pathPrefix}/${src.substr(1)}`
  }
  return src;
};

glob(path.join(path.resolve('./public/'), '**/*.html'))
  .then(files => {
    return Promise.all(
      files
        .map(file => {
          return fs.readFile(file, 'utf-8')
            .then(contents => [file, contents])
        })
    )
  })
  .then(contents => {
    return Promise.all(
      contents
        .map(([file, content]) => {
          const $ = cheerio.load(content);
          const images = $('img');
          if (images.length === 0) {
            return;
          }
          images.each((index, el) => {
            const { src, srcset } = el.attribs;
            if (src) {
              el.attribs.src = makeAbsolute(src);
            }

            if (srcset) {
              el.attribs.srcset = srcset.split(/\s*,\s*/)
                .map(makeAbsolute)
                .join(',\n');
            }
          });

          return fs.writeFile(file, $.html(), 'utf-8');
        })
    )
  })
  .then(() => {
    console.log('all files updated');
    process.exit(0);
  });

DSchau on 14 Jul 2017

Love the reproduction!

So yes, this isn't working. I thought I'd added it in the past but perhaps it got lost in a refactor.

We're pulling in the pathPrefix which should be added to paths here: https://github.com/gatsbyjs/gatsby/blob/e8296063a46aa0f192e22c31c1230e573498e529/packages/gatsby-remark-images/src/index.js#L16

Yeah, it was just lost in a refactor — responsiveSizes expects the pathPrefix to be passed in https://github.com/gatsbyjs/gatsby/blob/e8296063a46aa0f192e22c31c1230e573498e529/packages/gatsby-plugin-sharp/src/index.js#L351

So this is about the simplest PR fix possible :-)

@chiedo is planning on adding tests for this plugin soon but if you're feeling ambitious, you could also add a test to ensure path prefixing keeps working in the future.