CODEWITHSUNDEEP
htmlvue.jsvuejs2vue-componentvuetify.js
byshock
byshock

Reputation: 3

Vue assets image url auto changed

I will get an image that I use in Vue project as url from another project. No problem on vue side when I call it like this :

    <v-img
      class="header__logo"
      lazy-src="@/assets/images/mail.jpg"
      src="@/assets/images/mail.jpg"
      alt="Logo"
    ></v-img>

When I look at the url from the browser, I see that the place marked in bold has been added and I see that this code changes every time we release.

http://localhost:8081/img/mail.3d6d7034.jpg

How can I set this to not change?

Upvotes: 0

Views: 457

Answers (1)

Kapcash
Kapcash

Reputation: 6909

What is that hash in my asset file name?

Assets in a vue-cli / nuxt 2 project are bundled using webpack (more specifically the asset-module. That means they are included into a code chunk to reduce http requests and size.

Read vue-cli documentation about assets.

While bundling, the webpack module also includes a hash into the emitted file name. That's why this part changes over every build.

Solution: If you require this image file to have a static name, you can include it into your public/ folder instead.
It won't go through webpack, and its name will not be altered. The downside of this is that you have to use the absolute path of the file, it's not longer relative using @/assets/....

Read about the public folder.

Upvotes: 1

Related Questions