<template>
  <div>
    <img src="/path/to/image.jpg" alt="Image">
  </div>
</template>

<template>
  <div>
    <img v-bind:src="imageUrl" alt="Image">
  </div>
</template>

<template>
  <div>
    <img :src="require('@/assets/image.jpg')" alt="Image">
  </div>
</template>

<template>
  <div :style="{ backgroundImage: 'url(/path/to/image.jpg)' }"></div>
</template>

<template>
  <div>
    <video controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
  </div>
</template>

npm install video.js

<template>
? <div>
? ? <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"></video>
? </div>
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
? mounted() {
? ? this.initVideoPlayer();
? },
? methods: {
? ? initVideoPlayer() {
? ? ? this.player = videojs(this.$refs.videoPlayer, {
? ? ? ? controls: true,
? ? ? ? sources: [{
? ? ? ? ? src: this.videoUrl,
? ? ? ? ? type: 'video/mp4'
? ? ? ? }]
? ? ? });
? ? }
? }
};
</script>

npm install vue-video-player

<template>
? <div>
? ? <video-player :options="playerOptions"></video-player>
? </div>
</template>
<script>
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import VideoPlayer from 'vue-video-player';
export default {
? components: {
? ? VideoPlayer
? },
? data() {
? ? return {
? ? ? playerOptions: {
? ? ? ? sources: [{
? ? ? ? ? src: this.videoUrl,
? ? ? ? ? type: 'video/mp4'
? ? ? ? }],
? ? ? ? autoplay: false,
? ? ? ? controls: true
? ? ? }
? ? };
? }
};
</script>