'How to access static images in Nuxt production application hosted on Vercel?

I've got a website hosted on Vercel where I'm trying to use an image in the static folder as a favicon.

The static folder is in the root directory of the repository. Inside my nuxt.config.js file, I'm referencing the image like below:

module.exports = {
  mode: 'universal',
  router: {
    base: '/'
  },
  head: {
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: `/images/meta/favicon.ico`
      }, 
    ],
  }
}

This works locally, but doesn't work with my production site which is hosted with Vercel.

I tried changing the href of the favicon to an image that is already online which worked, confirming that the issue seems to be with the local images in my app.

The Vercel output file structure from the build process looks as follows:

For some reason, all files outside of the '_nuxt' folder aren't able to be accessed - this is also the case for the files in the js folder and fonts folder (e.g. when I try to access https://hownow-git-dev-hownow.vercel.app/js/adhoc.js I'm getting a 'script not found' error).

Am I missing some sort of configuration setting to allow me to access these files?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to access static images in Nuxt production application hosted on Vercel?

Sources

Related Questions