在我们写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会比引入一个图片更好。

image.png

总结一下,就是不要在vue的data中引入图片,还是尽量使用css

Logo

前往低代码交流专区

更多推荐