CODEWITHSUNDEEP
vue.jswebpackprogressive-web-apps
John
John

Reputation: 4991

VueJS webpack PWA assets icons manifest.json

I configured my PWA manifest.json in vue.config.js, shown below. How can I configure the PWA icons to refer to the images inside the assets/ folder?

module.exports = {
    pwa: {
        manifestOptions: {
          name: process.env.VUE_APP_APP_NAME,
          short_name: process.env.VUE_APP_SHORT_NAME,
          start_url: process.env.VUE_APP_START_URL,
          display: 'standalone',
          theme_color: process.env.VUE_APP_PRIMARY_COLOR,
          background_color: process.env.VUE_APP_BACKGROUND_COLOR,
          icons: [
            {
              src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
              sizes: "192x192",
              type: "image/png"
            },
            {
              src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
              sizes: "512x512",
              type: "image/png"
            }
          ]
        }
    }
}

When I run my app, I get this error :

http://localhost:8080/src/assets/company/logo-512x512.png (Download error or resource isn't a valid image)

I don't understand why /src is set in the URL.

Upvotes: 2

Views: 1361

Answers (1)

tony19
tony19

Reputation: 138696

Use static assets from the public directory (e.g., public/img/company/logo-192x192.png and public/img/company/logo-512x512.png), which are copied as-is to the build output. Then your vue.config.js would reference them like this:

// vue.config.js
module.exports = {
  pwa: {
    manifestOptions: {
      icons: [
        {
          src: `/img/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: `/img/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
          sizes: "512x512",
          type: "image/png"
        }
      ]
    }
  }
}

Upvotes: 3

Related Questions