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

发布时间:2023年12月26日

在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可能无法立即返回正确的路径。在默认情况下,它会返回默认图片的路径。因此,在图片文件加载完成之前,可能会看到默认图片或空白的图像框。您可以根据需要添加一些加载中的逻辑,例如使用一个加载动画,在图片加载完成后再进行显示。

文章来源:https://blog.csdn.net/weixin_42342065/article/details/135225945
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。