prefixLink not working as expected with webpack url loader?

[f0rr0]

I require an image like so:

import avatar from '../../avatar.jpeg';

export default function Bio() {
  return (
    <div className='bio'>
      <img className='avatar' alt='avatar' src={prefixLink(avatar)} />
      <p className='intro' dangerouslySetInnerHTML={{ __html: config.bio }} />
    </div>
  );
}

The image is not base64 encoded. A url is returned from url loader. In dev mode it looks something like http://0.0.0.0:8000/423d290eaf378bf7e0361ddf2a3ed695.jpeg but running this in production with linkPrefix = "/xyz" returns /xyz423d290eaf378bf7e0361ddf2a3ed695.jpeg

Using

prefixLink(`/${avatar}`)

fixes the issue in production but breaks it in dev. The output is /http://0.0.0.0:8000/423d290eaf378bf7e0361ddf2a3ed695.jpeg

[KyleAMathews]

I don't think the problem here is prefixLink. I'm pretty sure you have the same problem as #393 — that a publicPath isn't set for build-javascript and build-html. I've fixed this in the 1.0 branch. It'd be great if you want to backport the same fix. Basically you'd need to pull in the config.toml into webpack.config.js and then if program.prefixLink is true and there's a linkPrefix set in config.toml then make that the publicPath otherwise just use a forward slash.

gatsby/lib/utils/webpack.config.js

Line 61 in 3007f58

publicPath: program.prefixLinks ? `${siteDB().get(`config`).linkPrefix}/` : `/`,

[f0rr0]

@KyleAMathews If the publicPath is set to xyz/ and prefixLink returns xyz/myAsset.png, the URL would become xyz/xyz/myAsset.png. I'm not sure if I understood you correctly

[KyleAMathews]

Oh true... that's confusing. Hmmm... yeah this should be handled consistently — either with prefixLink or internally transparent to end user.

React router actually added support for setting a basename after Gatsby was started so we could actually just scrap prefixLink altogether in Gatsby 1.0 and rely on publicPath and baseName and then keep prefixLink around only for when people are manually creating links to assets similar to what create-react-app does https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder

[f0rr0]

I think with 1.0 you should just scrap prefixLink in favor of publicPath. What do you suggest we do for now though? I think since prefixLink is documented nicely and used in all the starters, perhaps you should merge this pr.

[KyleAMathews]

Yeah, sounds like a good plan. I'll create an issue to clean this up in 1.0.

[KyleAMathews]

@f0rr0 any other fixes you want in before I roll another release?

[f0rr0]

@KyleAMathews Nope, this seems good enough for now! Thanks

[KyleAMathews]

0.12.10 is out 🎉

[KyleAMathews]

The publicPath stuff was fixed in #502