如何优雅地在Vue页面中引入图片 |
您所在的位置:网站首页 › 怎么在目录里加标题呢图片 › 如何优雅地在Vue页面中引入图片 |
在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范也许你的代码里常常会这样写 在webpack中,require会自动处理资源,这块没问题,但是你放到vue的data里,vue会遍历data,给src加上响应式,但其实大部分时间,这个src并不需要响应式,这里造成了性能浪费。 通过computed解决上面这个错误方案,解决的方案之一:computed computed本身就有缓存,可以减少一些性能浪费 当图片不变的时候直接引入或者 .bg{ background:url("xxx.jpg") } 复制代码当我们这个图片不会变化的时候,可以直接引入,并不需要赋值一个变量。 同样,也可通过切换class名去动态显示图片,这样也比较好 export default{ data(){ return { flag: true } } } .bg1{ background:url("xxx1.jpg") } .bg2{ background:url("xxx2.jpg") } 复制代码 通过css变量切换图片这个只是我刚刚想起来的一个想法,前端培训理论上css变量可以存储任何东西,那能否存放图片地址呢。 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')}")`) } } .bg{ --bg:url('xxx.jpg'); background-image:--bg; } 复制代码个人测试成功,这个方法也可用,而且会比computed更好些,毕竟操作css变量开销更小。这个方法需要注意的是,css中图片一般都是写在url中的,因此需要拼接一个字符串url(你的内容)。 通过css绘制这个其实算一个题外话,有的时候一些图像其实是可以通过css画出来的,例如下图中这个三角,大家百度一下就会有各种css三角生成器,这种图形用css会比引入一个图片更好。 总结一下,就是不要在vue的data中引入图片,还是尽量使用css |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |