Exporting sapper with a base path causes src/node_module/images to have the wrong path

[chblack42]

Describe the bug When exporting a static sapper project, the images that are imported from src/node_module/images do not get their base paths updated for their src attributes nor do they benefit from a base path set by <base href='/test/'> in the head. Its reproducible from the sapper template where you can see that the successkid.jpg is a broken image that has a src something like this: <img alt="Success Kid" class="svelte-1kk9opm" src="/client/465898c830bb9d2c.jpg"> which tries to load the jpg from the root directory instead of using the base path which it was export to.

To Reproduce

1. Set up the sapper template: npx degit "sveltejs/sapper-template#rollup" my-app and follow instructions to install (I am using typescript)
2. Edit the server.js (server.ts for typescript) to have the base path be 'test':

.use(
  'test',
  compression({ threshold: 0 }),
  sirv('static', { dev }),
  sapper.middleware()
)

3. Export the project with the same base path of 'test': npm run export -- --basepath test
4. Start serving the exported project: npx serve __sapper__/export
5. Visit the url: http://localhost:5000/test
6. Notice the "successkid.jpg" is a broken image

Expected behavior successkid.jpg is displayed and loads from the correct base path

[Tatloani]

The same happens to me, using the template from rollup running with npm run dev, the only change being the url added at server.js in /src.

The image is being served correctly in my case, when you change the src from the to have the base_url added manually to the path it should be it loads the image correctly. So maybe sapper is not prefixing the path correctly? or is there any other step i'm missing?

[Praful123-coder815]

First we've to deploy the path of image correctly , then we can get whether sapper is not taking the path or there should be some mistake in the path setttings.

[teunstout]

It's a bit hidden but you should go into your rollup config and also change your server and client url with the path. Should look a bit like the code below. Client: url({ sourceDir: path.resolve(__dirname, "src/node_modules/images"), publicPath:${public_path}/client/, emitFiles: false, // already emitted by client build }),

This changes the root path to where the will look for images on both client and server

[ierhyna]

In my case modifying the publicPath for url in rollup.config.js fixed the issue. Be sure to include leading slash first:

const { BASE_PATH } = process.env;
...
url({
        sourceDir: path.resolve(__dirname, "src/node_modules/images"),
        publicPath: `/${BASE_PATH}/client/`,
}),

[tcd93]

I checked the Sapper codebase a bit, seems like they don't include a env variable like they did with legacy build

So here's what I did:

In package.json, set a env variable called BASE_PATH when export:

"scripts": {
    "export": "set BASE_PATH=[your-github-repo-name]&sapper export --basepath [your-github-repo-name]"
}

In rollup.config.js:

const {  BASE_PATH } = process.env
...
url({
    sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
    ...
    publicPath: `${basePath ? '/' + basePath : ''}/client/`
})

In server.js / server.ts:

const {  BASE_PATH } = process.env
polka().use(BASE_PATH ? '/[your-github-repo-name]' : '/', ...) .listen()