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

Question

我正在使用最新的 Nuxt 2 版本，我想缓存我的图像并在动画之前预加载它们，静态文件夹不允许我缓存图像，因为这个文件夹没有被 webpack 解析，所以对于那个文档说我应该使用资产文件夹并让 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。

资产目录/图片link to the docs

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

How to use assets folder to load images with dynamic path in Nuxt?

javascript

nuxt.js