Posted in Uncategorized

dynamic publicPath not working with img tags and assets within css (unless extractCSS: true)

   March 14, 2021  1 Comment on dynamic publicPath not working with img tags and assets within css (unless extractCSS: true)

As stated in #8520, dynamically setting publicPath to use a cdn url doesn’t work for img tags and assets referenced in css.
While i can make assets referenced in css work using extractCSS: true and setting publicPath to the absolute cdn path (i.e. without the cdn hostname and protocol), i’m unable to make img tags work referencing image assets.

Versions

  • nuxt: nuxt-edge@^2.15.0-26848868.eae3acb7
  • node: 14

Reproduction

Link to codesandbox:

https://codesandbox.io/s/inspiring-river-xp8xb?file=/pages/index.vue

As you can see there, the images referenced via img tag as well as css use the build-time publicPath,
even though the referenced javascript files use the correct dynamic cdn url publicPath.

Steps to reproduce

E.g. specify build.publicPath to equal process.env.CDN_URL and add an img tag to a component referencing e.g. ~/assets/file.jpg.
Run CDN_URL=/_nuxt/ yarn build and then CDN_URL=https://cdn.host/path/to/assets/ yarn start

What is Expected?

The img tag should be referenced via https://cdn.host/path/to/assets/file.jpg

What is actually happening?

The img tag will still be referenced via /_nuxt/file.jpg

Full dicussion on github.com

1 possible answer(s) on “dynamic publicPath not working with img tags and assets within css (unless extractCSS: true)”

  1. I tested with Nuxt 2.15.3 and the issue I have is that dynamic publicPath doesn’t work with images referenced within global CSS.

    Reproduction
    Link to codesandbox: https://codesandbox.io/s/vigilant-matsumoto-5zg2g?file=/assets/main.css

    In the sandbox, we reference an image in global CSS

    /* assets/main.css */
.bg {
  background-image: url(./bg.jpeg); 
}

    Then after running

    yarn build && CDN_URL=https://cdn.host/path/to/assets/ yarn start

    you’ll see that the background image is still referenced via /_nuxt/file.jpg instead of https://cdn.host/path/to/assets/file.jpg