【Vue】判断项目的某个文件夹中是否有指定的图片

在Vue中，您可以使用计算属性和v-bind指令来动态加载多个图片。

首先，确保有一个存放图片文件的文件夹，并将需要加载的图片文件名保存在一个数组中，例如imageNames。

然后，可以使用Vue的计算属性来处理这个数组，判断每个图片文件是否存在，确定将要加载的图片的路径。最后，将路径绑定到标签的src属性上。

以下是一个Vue组件的示例代码，展示如何根据图片文件名数组动态加载图片：

<template>
  <div>
    <img v-for="(imageName, index) in imageNames" :key="index" :src="getImagePath(imageName)" :alt="imageName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageNames: ['image-1.jpg', 'image-3.jpg', 'image-4.jpg']
    };
  },
  methods: {
    getImagePath(imageName) {
    // imageFolder是项目中存放图片的文件夹，最好把图片放在public文件夹中，因为public文件夹不会被编译，可以在浏览器中直接访问到图片，其他文件夹被编译之后可能会找不到图片路径
      const imagePath = `imageFolder/${imageName}`;
      // 利用图片的路径来判断图片是否存在，不存在则使用默认图片路径
      const defaultImagePath = 'imageFolder/default-image.png';

      // 发送一个 HEAD 请求来检查图片是否存在
      fetch(imagePath, { method: 'HEAD' })
        .then(response => {
          if (response.ok) {
            // 图片存在，返回正确的路径
            return imagePath;
          } else {
            // 图片不存在，返回默认图片路径
            return defaultImagePath;
          }
        })
        .catch(error => {
          // 发生错误，返回默认图片路径
          return defaultImagePath;
        });
    }
  }
}
</script>

在这个示例中，imageNames数组包含了要加载的图片文件名。通过使用v-for指令遍历这个数组，然后动态绑定图片的src属性。在计算方法getImagePath中，使用fetch方法发送一个 HEAD 请求来检查图片是否存在。如果图片存在，返回正确的路径，否则返回默认图片路径。

请注意，由于fetch方法是异步的，因此计算属性getImagePath可能无法立即返回正确的路径。在默认情况下，它会返回默认图片的路径。因此，在图片文件加载完成之前，可能会看到默认图片或空白的图像框。您可以根据需要添加一些加载中的逻辑，例如使用一个加载动画，在图片加载完成后再进行显示。