nvue 中在自定义组件里再使用 <video :poster="poster"> ,检查图片路径、格式、尺寸等都正确,但是图片没有显示出来,怎样设置加载顺序
时间: 2024-02-12 17:05:26 浏览: 25
在 Vue 中,当图片加载失败时,会显示一个空白的图像框,这可能是您遇到的情况。您可以尝试将 `poster` 属性绑定到一个动态的数据属性上,如下所示:
```html
<template>
<video :poster="posterUrl"></video>
</template>
<script>
export default {
data() {
return {
posterUrl: '' // 初始化为空字符串
}
},
mounted() {
this.loadPoster() // 在组件挂载后加载海报
},
methods: {
loadPoster() {
const img = new Image()
img.src = 'your_poster_url' // 替换为您的海报图片地址
img.onload = () => {
this.posterUrl = img.src // 加载成功后将 posterUrl 设置为图片地址
}
img.onerror = () => {
console.error('Failed to load poster image')
}
}
}
}
</script>
```
这种方法可以确保在海报图片加载完成之前不会显示空白图像框。如果您需要加载多个图片,可以将 `loadPoster` 方法重构为一个通用的方法,使用 Promise 和 async/await 实现并行加载。