亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3圖片未加載成功前占位的問題及解決

 更新時(shí)間：2025年06月12日 09:53:46   作者：不想起名55  
這篇文章主要介紹了Vue3圖片未加載成功前占位的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

背景

在寫項(xiàng)目時(shí)，加載圖片未成功前，會(huì)出現(xiàn)空白頁面，太影響美觀和體驗(yàn)感

解決方案

element ui通過slot占位符解決

自定義指令

原生img標(biāo)簽可以通過自定義指令解決，img標(biāo)簽有onload和onerror事件，都是在渲染成功后才出發(fā)，想占位要在渲染前觸發(fā)

<template>
     <img
         class="image_item-img"
         v-preload="'loading'" 
         src="https://xx"
         alt="加載失敗"
     />
</template>
<script setup>
import { reactive } from 'vue'

// 自定義圖片占位
const vPreload = {
	//未渲染img標(biāo)簽前
    beforeMount(el, binding) {
        el.style.backgroundColor = '#ececec'
        el.classList.add(binding.value) //binding.value是上面?zhèn)鬟^來'loading'，我自定義的類名（可自己定義loading樣式）
    },
    mounted(el, binding) {
        el.addEventListener('error', () => {
            el.classList.remove(binding.value)
        })
    },
}
</script>

用圖片代替

 <img
     class="image_item-img"
     v-for="(item, index) in imageList"
     :key="item.id"
     :src="item.url ? require('/src/assets/logo.png') : item.url"
     alt="加載失敗"
     @click="handlePreview(index)"
 />

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論