Vue 图片和视频组件：灵活展示多种媒体内容

这是一个简单的 Vue 组件，可以展示图片或视频。

Template:

<template>
  <div class='media-component'>
    <img v-if='isImage' :src='src' alt=''>
    <video v-else :src='src' controls></video>
  </div>
</template>

Script:

<script>
export default {
  name: 'MediaComponent',
  props: {
    src: {
      type: String,
      required: true,
    },
    isImage: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

使用:

<media-component src='https://example.com/image.jpg'></media-component>
<media-component src='https://example.com/video.mp4' :is-image='false'></media-component>

这个组件会根据 'isImage' 属性来判断展示图片还是视频。当 'isImage' 为 'true' 时，会展示图片，否则会展示视频。'src' 属性是必须的，它代表要展示的图片或视频的链接。

另外，当展示视频时，我们添加了 'controls' 属性，这样就可以让用户控制视频播放了。