<template>
<div v-loading="loading" class="flv-item" :class="{ 'full-screen': isFullScreen }" @dblclick="fullScreen">
<template v-if="url !== ''">
<div class="title-line">
<span class="title">{{ title }}</span>
</div>
<img v-if="imgShow" id="img-video" :src="imgUrl" class="video img-a" alt="获取图片失败" @error="imgerrorfun()" @click="closeImg" />
</template>
</div>
</template>
对于组件中的img标签的链接我们用的是图片流的方式:url不变 图片在不断的改变
对于这类img标签想要停止加载图片首先会想到v-if 但是事实是不可行
后面找到了一个办法 window.stop()方法 这个方法是停止所有的静态资源的加载 会停止所有的img标签的加载,但是如果我们想要停止单个img标签的加载这个方法就不行
// 跳出当前页面,停止浏览器的资源加载
window.stop();
如果想停止单个的img标签就要用到iframe标签
就是在我们的html界面中嵌套另一个html界面将单个img标签嵌套在这个iframe的html里面
<template>
<div style="width: 100%; height: 100%">
<iframe :id="`iframeContainer${imgUrl}`" src="" width="100%" height="100%" :srcdoc="imgHtml" frameborder="0"></iframe>
</div>
</template>
<script lang="ts" setup>
import { computed, toRefs, onMounted, onUpdated } from 'vue';
const props = defineProps<{ imgUrl: string }>();
const { imgUrl } = toRefs(props);
const emits = defineEmits<{ (e: 'full-screen'): void }>();
const imgHtml = computed(() => {
return `
<html>
<head>
<style>
html,
body,
img {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<img src="${imgUrl.value}" />
</body>
</html>
`;
});
</script>
如果想停止这个img标签我们把这个iframe用v-if不让他显示 资源就不会加载了