在 Vue 3 中实现自定义处理逻辑来展示视频或图片，可以通过定义自定义组件并根据数据动态地渲染 video 或 img 标签。下面是一个详细的实现步骤，通过自定义 cl-image 组件

在 Vue 3 中，你可以通过创建一个自定义的 ClImage 组件来根据传入的数据动态地渲染 video 或 img 标签。这个组件将接受一些属性，如 type（用于决定是渲染视频还是图片）、src（媒体资源的 URL）、以及其他可能的属性（如视频的控制选项、图片的样式等）

<template>  
  <div>  
    <video v-if="type === 'video'" :src="src" controls>  
      Your browser does not support the video tag.  
    </video>  
    <img v-else-if="type === 'image'" :src="src" :alt="alt" />  
    <!-- 可以添加更多的类型检查，如 v-else-if="type === 'otherType'" -->  
    <div v-else>Unsupported media type.</div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'ClImage',  
  props: {  
    type: {  
      type: String,  
      required: true,  
      validator: (value) => ['video', 'image'].includes(value),  
    },  
    src: {  
      type: String,  
      required: true,  
    },  
    alt: {  
      type: String,  
      default: '',  
    },  
    // 可以添加更多 props 来支持视频或图片的额外属性  
  },  
};  
</script>  
  
<style scoped>  
/* 添加你的样式 */  
</style>

<template>  
  <div>  
    <!-- 展示视频 -->  
    <ClImage type="video" src="videoURL.mp4" />  
  
    <!-- 展示图片 -->  
    <ClImage type="image" src="imageURL.jpg" alt="描述性文本" />  
  </div>  
</template>  
  
<script>  
// 引入 ClImage 组件  
import ClImage from './components/ClImage.vue';  
  
export default {  
  components: {  
    ClImage,  
  },  
};  
</script>