耀极客论坛

 找回密码
 立即注册
查看: 3500|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 02:32:26 | 显示全部楼层 |阅读模式
  我们在Vue.js项目中经常需要引用图片,所以下面这篇文章主要介绍了关于在Vue页面中如何更优雅地引入图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
  在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。

错误示范
  也许你的代码里常常会这样写
  1. ‹template>
  2.     ‹img :src="src">
  3. ‹/template>
  4. ‹script>
  5.     export default{
  6.         data(){
  7.             return {
  8.                src: require('xxx.jpg')
  9.             }
  10.         }
  11.     }
  12. ‹/script>
复制代码
  在webpack中,require会自动处理资源,这块没问题,但是你放到vue的data里,vue会遍历data,给src加上响应式,但其实大部分时间,这个src并不需要响应式,这里造成了性能浪费。

通过computed
  解决上面这个错误方案,解决的方案之一:computed
  1. ‹template>
  2.     ‹img :src="src">
  3. ‹/template>
  4. ‹script>
  5.    const src = require('xxx.jpg')
  6.     export default{
  7.         computed:{
  8.            src(){
  9.              return src
  10.            }
  11.         }
  12.     }
  13. ‹/script>
复制代码
  computed本身就有缓存,可以减少一些性能浪费

当图片不变的时候直接引入
  1. ‹template>
  2.     ‹img :src="src">
  3. ‹/template>
复制代码
  或者
  1. ‹template>
  2.     ‹div class="bg">‹/div>
  3. ‹/template>
  4. ‹style>
  5. .bg{
  6. background:url("xxx.jpg")
  7. }
  8. ‹/style>
复制代码
  当我们这个图片不会变化的时候,可以直接引入,并不需要赋值一个变量。
  同样,也可通过切换class名去动态显示图片,这样也比较好
  1. ‹template>
  2.     ‹div :class="flag ? 'bg1':'bg2'">‹/div>
  3. ‹/template>
  4. ‹script>
  5.     export default{
  6.      data(){
  7.             return {
  8.                flag: true
  9.             }
  10.         }
  11.     }
  12. ‹/script>
  13. ‹style>
  14. .bg1{
  15. background:url("xxx1.jpg")
  16. }
  17. .bg2{
  18. background:url("xxx2.jpg")
  19. }
  20. ‹/style>
复制代码
通过css变量切换图片
  这个只是我刚刚想起来的一个想法,理论上css变量可以存储任何东西,那能否存放图片地址呢。
  1. ‹template>
  2.     ‹div class="bg">‹/div>
  3. ‹/template>
  4. ‹script>
  5.     export default{
  6.         mounted(){
  7.            // 第一种方法,图片地址或base64
  8.            this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`)
  9.            // 第二种方法
  10.            this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`)
  11.            
  12.         }
  13.     }
  14. ‹/script>   
  15. ‹style>
  16. .bg{
  17.      --bg:url('xxx.jpg');
  18.      background-image:--bg;
  19. }
  20. ‹/style>
复制代码
  个人测试成功,这个方法也可用,而且会比computed更好些,毕竟操作css变量开销更小。这个方法需要注意的是,css中图片一般都是写在url中的,因此需要拼接一个字符串url(你的内容)。

通过css绘制
  这个其实算一个题外话,有的时候一些图像其实是可以通过css画出来的,例如下图中这个三角,大家百度一下就会有各种css三角生成器,这种图形用css会比引入一个图片更好。

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

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 11:07 , Processed in 0.084809 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表