快捷導(dǎo)航

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

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

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

錯誤示范

也許你的代碼里常常會這樣寫

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

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

通過computed

解決上面這個錯誤方案，解決的方案之一：computed

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

computed本身就有緩存，可以減少一些性能浪費

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

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

或者

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

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

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

同樣，也可通過切換class名去動態(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變量切換圖片

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

<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>

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