VUE：如何自动导入文件夹中的所有图像？

Question

我尝试自动导入文件夹中的所有图像。在//测试下是我尝试过的：

<template>
  <p>classical art</p>
  <img v-for="image in images" :key="image" :src="image.url" :alt="image.alt" />
</template>

<script>
export default {
  data: function () {
    return {
      name: "classical-art",
      images: [
        { url: require("../assets/images/classical-art/img-00001.jpg"), alt: "první" },
        { url: require("../assets/images/classical-art/img-00002.jpg"), alt: "druhý" },
      ],
    };
  },
};

// tested
const classicalArt = require(`../assets/images/classical-art/.jpg`)

classicalArt.forEach((image) => {
    return image;
});
</script>

<style module lang="scss"></style>

我不擅长这件事，所以我需要帮助。可能我只是愚蠢，但我无法让它发挥作用。如果可能的话，我希望它是异步的（惰性的）或者其他什么。

-----更新：

我尝试了类似的方法，但仍然一无所获，但是使用 require.context 我应该能够做到这一点：

<template>
  <p>classical art</p>
  <img :src="getImgUrl()" v-bind:alt="req" />
</template>

<script>
export default {
  data: function () {
    return {
      name: "classical-art",
    };
  },
  methods: {
    getImgUrl() {
      var req = require.context(
        "../assets/images/classical-art/",
        false,
        /\*.jpg$/
      );
      req.keys().forEach(function (key) {
        req(key);
      });
    },
  },
};
</script>

<style module lang="scss"></style>

我希望当我向 classic-art 文件夹添加另一个图像时自动创建一个新标签并显示图像，而无需编辑代码并手动注册它

有人可以帮我吗？

Answer 1

对于图像渲染，您必须指示每个图像的确切 url，因此您必须以正确的方式手动输入每个 url。

顺便说一句，你的想法可以用 NodeJS 实现。节点运行时可以访问文件系统，因此可以为每个文件自动创建 url 字符串。

不幸的是，Vue 无法真正访问您的文件，这意味着您的每个组件、文件或图像都必须手动导入。

Answer 2

你可以试试

export default {
    methods: {
        getImgUrl() {
            const arr = []; 
            var req = require.context(
                "../assets/images/classical-art/",
                false,
                /\*.jpg$/
            );
            req.keys().forEach(function (key) {
                arr.push(req(key))
            });
            return arr;
       },
    },
};