如何使用assets文件夹在Nuxt中加载具有动态路径的图像

Question

我使用的是最新的Nuxt 2版本，我想在动画之前缓存并预加载我的图像，静态文件夹不允许我缓存图像，因为这个文件夹没有被webpack解析，所以对于该文档，我应该使用assets文件夹，让webpack为我解析它，问题是，当我想动态添加src时，所有图像都使用静态路径。我的整个路径都被复制了，而且它不再使用webpack。

这项工作：

<img class="lady" src="~/assets/lady/lady_001.png" />
Result: http://localhost:3000/_nuxt/assets/lady/lady_001.png

这不是：

<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只是从000到180转换为字符串的数字序列。有什么方法可以实现这一点吗？或者我被迫使用一些外部库来缓存静态内容？

Answer 1

在Nuxt中处理动态图像时，可以使用require。

文件的资产目录/图像链接