• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

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

在我们写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

总结

到此这篇关于在Vue页面中如何更优雅地引入图片的文章就介绍到这了,更多相关Vue更优雅引入图片内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
强烈推荐!Vue3.2中的setup语法糖发布时间:2022-02-05
下一篇:
一文了解什么是TypeScript?发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap