当前位置：首页 > VUE

vue绑定图片实现默认

2026-02-22 06:42:36VUE

在 Vue 中绑定图片并设置默认图片

使用 v-bind 或 : 绑定图片路径 通过 v-bind 或简写的 : 动态绑定图片路径。如果图片路径无效或为空，可以设置默认图片。

vue绑定图片实现默认

<template>
  <img :src="imageUrl || defaultImage" alt="示例图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 动态图片路径，可能为空
      defaultImage: '/path/to/default-image.png' // 默认图片路径
    };
  }
};
</script>

使用计算属性处理默认图片 通过计算属性判断动态图片路径是否有效，无效时返回默认图片路径。

vue绑定图片实现默认

<template>
  <img :src="computedImageUrl" alt="示例图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 动态图片路径
      defaultImage: '/path/to/default-image.png' // 默认图片路径
    };
  },
  computed: {
    computedImageUrl() {
      return this.imageUrl || this.defaultImage;
    }
  }
};
</script>

使用 onerror 事件处理加载失败 如果图片加载失败，通过 onerror 事件替换为默认图片。

<template>
  <img :src="imageUrl" @error="handleImageError" alt="示例图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/path/to/original-image.png', // 动态图片路径
      defaultImage: '/path/to/default-image.png' // 默认图片路径
    };
  },
  methods: {
    handleImageError(event) {
      event.target.src = this.defaultImage;
    }
  }
};
</script>

使用第三方库（如 v-lazy-image） 如果需要懒加载或更复杂的图片处理，可以使用第三方库如 v-lazy-image。

<template>
  <v-lazy-image
    :src="imageUrl"
    :src-placeholder="defaultImage"
    alt="示例图片"
  />
</template>

<script>
import VLazyImage from 'v-lazy-image';

export default {
  components: {
    VLazyImage
  },
  data() {
    return {
      imageUrl: '/path/to/original-image.png',
      defaultImage: '/path/to/default-image.png'
    };
  }
};
</script>