在 Vue.js 中使用自定义指令（directive）来实现图片加载失败时显示默认占位图的功能

以下是一个简单的自定义指令的例子：

<template>
  <div>
    <!-- 使用 v-image 指令，绑定图片地址和默认占位图地址 -->
    <img v-image="imageUrl" v-placeholder="placeholderImage" alt="Image" />
  </div>
</template>

<script>
// 创建自定义指令
Vue.directive('image', {
  // 指令绑定到元素时调用
  bind(el, binding) {
    // 设置图片加载失败时的回调函数
    el.onerror = function () {
      // 将图片的 src 设置为默认占位图的地址
      el.src = binding.value.placeholder;
    };

    // 设置图片地址
    el.src = binding.value.src;
  },
});

// 创建自定义指令
Vue.directive('placeholder', {
  // 指令绑定到元素时调用
  bind(el, binding) {
    // 设置元素的 src 属性为默认占位图的地址
    el.src = binding.value;
  },
});

export default {
  data() {
    return {
      // 默认占位图的地址
      placeholderImage: 'path/to/placeholder.jpg',
      // 图片地址，可以是动态获取的
      imageUrl: 'path/to/image.jpg',
    };
  },
};
</script>

<style>
/* 可以添加样式，控制默认占位图的大小、位置等 */
</style>

在上述例子中，我们创建了两个自定义指令：v-image 和 v-placeholder。v-image 指令负责设置图片加载失败时的回调函数，而 v-placeholder 指令负责设置默认占位图的地址。通过在模板中使用这两个指令，你可以实现图片加载失败时显示默认占位图的效果。