快捷導(dǎo)航

在Vue頁面中如何更優(yōu)雅地引入圖片詳解

更新時(shí)間：2021年12月09日 11:24:17 作者：前端冒菜師

我們?cè)赩ue.js項(xiàng)目中經(jīng)常需要引用圖片,所以下面這篇文章主要介紹了關(guān)于在Vue頁面中如何更優(yōu)雅地引入圖片的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

錯(cuò)誤示范

也許你的代碼里常常會(huì)這樣寫

<template>
    <img :src="src">
</template>
<script>
    export default{
        data(){
            return {
               src: require('xxx.jpg')
            }
        }
    }
</script>

在webpack中，require會(huì)自動(dòng)處理資源，這塊沒問題，但是你放到vue的data里，vue會(huì)遍歷data，給src加上響應(yīng)式，但其實(shí)大部分時(shí)間，這個(gè)src并不需要響應(yīng)式，這里造成了性能浪費(fèi)。

通過computed

解決上面這個(gè)錯(cuò)誤方案，解決的方案之一：computed

<template>
    <img :src="src">
</template>
<script>
   const src = require('xxx.jpg')
    export default{
        computed:{
           src(){
             return src
           }
        }
    }
</script>

computed本身就有緩存，可以減少一些性能浪費(fèi)

當(dāng)圖片不變的時(shí)候直接引入

<template>
    <img :src="src">
</template>

或者

<template>
    <div class="bg"></div>
</template>

<style>
 .bg{
 background:url("xxx.jpg")
 }
</style>

當(dāng)我們這個(gè)圖片不會(huì)變化的時(shí)候，可以直接引入，并不需要賦值一個(gè)變量。

同樣，也可通過切換class名去動(dòng)態(tài)顯示圖片，這樣也比較好

<template>
    <div :class="flag ? 'bg1':'bg2'"></div>
</template>
<script>
    export default{
     data(){
            return {
               flag: true
            }
        }
    }
</script>
<style>
 .bg1{
 background:url("xxx1.jpg")
 }
 .bg2{
 background:url("xxx2.jpg")
 }
</style>

通過css變量切換圖片

這個(gè)只是我剛剛想起來的一個(gè)想法，理論上css變量可以存儲(chǔ)任何東西，那能否存放圖片地址呢。

<template>
    <div class="bg"></div>
</template>
<script>
    export default{
        mounted(){
           // 第一種方法，圖片地址或base64
           this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`)
           // 第二種方法
           this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`)
           
        }
    }
</script>    
<style>
 .bg{
     --bg:url('xxx.jpg');
     background-image:--bg;
 }
</style>

個(gè)人測(cè)試成功，這個(gè)方法也可用，而且會(huì)比computed更好些，畢竟操作css變量開銷更小。這個(gè)方法需要注意的是，css中圖片一般都是寫在url中的，因此需要拼接一個(gè)字符串url(你的內(nèi)容)。