I am using the latest Nuxt 2 version and I want to have my images cached and preload them before animation, static folder doesn’t allow me to cache images because this folder is not parsed by webpack, so for that documentation says that I should use assets folder and let webpack parse it for me, the problem is that everything works with static path for the images when I want to add src
dynamically my whole path is copied over and it’s no longer using webpack for this.
This works:
<img class="lady" src="~/assets/lady/lady_001.png" />
Result: http://localhost:3000/_nuxt/assets/lady/lady_001.png
This not:
<img class="lady" :src="activeImage" alt="" />
Result: http://localhost:3000/~/assets/lady/lady_124.png
...
computed: {
activeImage() {
return `~/assets/lady/lady_${this.activeTimeline}.png`;
},
},
activeTimeline is just sequence of number from 000 to 180 converted to string. Is there any way to achieve this or I am forced to use some external library for caching static content?