CODEWITHSUNDEEP
htmlvue.jsdeployment
Ayudh
Ayudh

Reputation: 1763

VueJS deployed production build showing broken png images

I've ran npm run build and this generates a dist folder with the static assets such as images. I'm using history mode on vue router.

Here's what the HTML for the image looks like:

enter image description here

Here's what the dist folder looks like:

enter image description here

Now after deploying the site, the images are broken:

enter image description here

However, the img src is correct:

enter image description here

So what's the issue here?

Upvotes: 0

Views: 1266

Answers (2)

Filip Tomes
Filip Tomes

Reputation: 11

Try to change paths in the index.js containing routes to your destination folder for example: dist.

As a publicPath I set ./ as Daniel mentioned.

This helped me but still, I've just started to learn VueJS so it might not to be the best solution.

    const routes = [
  {
    path: '/dist/',
    name: 'Home',
    component: Home
  },
  {
    path: '/dist/map',
    name: 'Map',
    component: Map
  },
  {
    path: '/dist/store',
    name: 'Store',
    component: Store
  }
]

Upvotes: 1

Daniel
Daniel

Reputation: 35684

I'm going to go out on a limb here and guess that the problem is related to your routes and that the relative paths are not working from routes.

If your app is shown on root directory /, the relative image path would work, but because (and it's guess) your route changes the current path to something like /sales, the relative path no longer works.

You may be able to fix this just by making sure that you use the relative path.

for example, if you're using a vue-cli-3 generated project, check the vue.config.js file and make sure you don't have the publicPath set, because it defaults to /.

module.exports = {
  publicPath: "./", // <= this will use relative path
};

Upvotes: 1

Related Questions