前端技巧之svg精灵图svg-sprite-loader

首先说明精灵图的必要性,其可以让我们只需要向服务器请求一次图片资源,就能加载很多图片,即能够减轻http请求造成的服务器压力。

然后这里要说明的是这个插件是webpack上面的,所以在vue2中比较好用,如果在vue3中,可能解决方案就不是这个插件了。

然后,svg的解决方案包含了精灵图和svg的全局组件配置,这里只是一部分,完整版的解决方案还有另一篇。

这是老师的图的细节。

老师没提到上面的部分,然后这里还有我没注意到的细节就是,或许因为这个东西属于是webpack上的,所以在vue.config.js文件中并没有引入这个文件而是直接添加配置项即可。上面的框的意思是不要用默认的svg的方式来解析,下面的框意思是按照我们设置的svg-sprite-loader来将这些图片转成雪碧图。当然,我们想看到效果,可以通过检查浏览器的代码,找到

这些代码。

相关推荐

  1. 对 CSS Sprites精灵) 的理解

    2024-02-19 13:40:02       38 阅读
  2. 突破编程_前端_SVG(元素碰撞检测)

    2024-02-19 13:40:02       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 13:40:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 13:40:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 13:40:02       82 阅读
  4. Python语言-面向对象

    2024-02-19 13:40:02       91 阅读

热门阅读

  1. c++ 6

    c++ 6

    2024-02-19 13:40:02      44 阅读
  2. Kubernetes基础(二十一)-k8s的服务发现机制

    2024-02-19 13:40:02       48 阅读
  3. 速盾网络:CDN用几天关了可以吗?安全吗?

    2024-02-19 13:40:02       49 阅读
  4. Makefile整理代码

    2024-02-19 13:40:02       46 阅读
  5. 深度学习---图像分割

    2024-02-19 13:40:02       37 阅读
  6. 深度学习的应用实例

    2024-02-19 13:40:02       46 阅读
  7. 785. 快速排序

    2024-02-19 13:40:02       55 阅读
  8. 后端防止重复点击

    2024-02-19 13:40:02       53 阅读
  9. git提交代码冲突

    2024-02-19 13:40:02       50 阅读
  10. 第13章 网络 Page818 UDP(和TCP的比较)

    2024-02-19 13:40:02       43 阅读