Generating static files with relative paths with Nuxt

Question

How can I change path of files, when generating static with yarn run generate?

For example, I need to get <img src="images/image.png"> but by default I get <img src="/image/image.png I tried to use config bellow, and I had correct paths for .js files, but code into js-files wasn't running. Thanks for help.

extend(config, ctx) {
  if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }

  if (!ctx.isDev && ctx.isClient) {
    // eslint-disable-next-line no-param-reassign
    config.output.publicPath = '_nuxt/'
  }
}

JanuszO JanuszO · Accepted Answer · 2019-02-26T21:09:18

If you load picture from assets directory, files have dynamic paths depending on where they are currently loaded. you can generate a path with the help of a webpage:

<img :src="require('~/assets/images/image.png)">

On the other hand, in case of static directory - files are copied to the main directory, that's why you're using the path from the main location e.g.

<img src="images/image.png">

Generating static files with relative paths with Nuxt

1 Answers