在Vue页面中如何更优雅地引入图片详解

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

错误示范

也许你的代码里常常会这样写

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