Vue assets image url auto changed

Issue

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?

Solution

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.

Answered By – Kapcash

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.