如何優雅地在Vue頁面中引入圖片

在我們寫vue項目中肯定會用到各種圖片，那么如何更好的使用圖片資源呢。這里我講一下我常用的方法。

錯誤示范

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

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

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

通過computed

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

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

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

當圖片不變的時候直接引入

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

或者

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

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

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

同樣，也可通過切換class名去動態顯示圖片，這樣也比較好

<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(你的內容)。

通過css繪制

這個其實算一個題外話，有的時候一些圖像其實是可以通過css畫出來的,例如下圖中這個三角，大家百度一下就會有各種css三角生成器，這種圖形用css會比引入一個圖片更好。

總結一下，就是不要在vue的data中引入圖片，還是盡量使用css