Vue3圖片未加載成功前占位的問題及解決
更新時間：2025年06月12日 09:53:46 作者：不想起名55
這篇文章主要介紹了Vue3圖片未加載成功前占位的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
在寫項目時，加載圖片未成功前，會出現(xià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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
我們在做了用戶登錄后,就會讓用戶跳轉(zhuǎn)到個人中心,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue+Element做個個人中心的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue中使用swiper,左右箭頭點擊沒有效果問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3+ts項目之安裝eslint、prettier和sass的詳細(xì)過程
這篇文章主要介紹了vue3+ts項目02-安裝eslint、prettier和sass的詳細(xì)過程,在本文講解中需要注意執(zhí)行yarn format會自動格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下2023-10-10
VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼
本文主要介紹了VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue 中的自定義指令是對底層 dom 進(jìn)行操作，下面以實現(xiàn)滾動到底部加載數(shù)據(jù)，實現(xiàn)無限加載來介紹如何自定義一個簡單的指令。2017-01-01
在一般業(yè)務(wù)中監(jiān)聽的最多的就是 Click 事件，但是在一些業(yè)務(wù)比如 Alert 和 Pop 效果時，需要監(jiān)聽在元素外部的點擊來關(guān)閉彈窗。2020-11-11
這篇文章主要介紹了vue項目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-09-09