--- theme: v-green --- > 在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 # 错误示范也许你的代码里常常会这样写 ``` ``` 在webpack中，require会自动处理资源，这块没问题，但是你放到vue的data里，vue会遍历data，给src加上响应式，但其实大部分时间，这个src并不需要响应式，这里造成了性能浪费。 # 通过computed 解决上面这个错误方案，解决的方案之一：computed ``` ``` computed本身就有缓存，可以减少一些性能浪费 # 当图片不变的时候直接引入 ``` ``` 或者 ``` ``` 当我们这个图片不会变化的时候，可以直接引入，并不需要赋值一个变量。同样，也可通过切换class名去动态显示图片，这样也比较好 ``` ``` # 通过css变量切换图片这个只是我刚刚想起来的一个想法，理论上css变量可以存储任何东西，那能否存放图片地址呢。 ``` ``` 个人测试成功，这个方法也可用，而且会比computed更好些，毕竟操作css变量开销更小。这个方法需要注意的是，css中图片一般都是写在url中的，因此需要拼接一个字符串``url(你的内容)``。 # 通过css绘制这个其实算一个题外话，有的时候一些图像其实是可以通过css画出来的,例如下图中这个三角，大家百度一下就会有各种css三角生成器，这种图形用css会比引入一个图片更好。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56a5761e77df4cd9ae549133126b4fae~tplv-k3u1fbpfcp-watermark.image?) > 总结一下，就是不要在vue的data中引入图片，还是尽量使用css