如何在Vue页面中优雅地实现图片引入及详细说明？

本文共计773个文字，预计阅读时间需要4分钟。

目录 + 错误示例 + 通过computed + 当图片不变时直接引入 + 通过css变量切换图片 + 通过css绘制 + 总结 + 在我们写vue项目中，经常会用到各种图片，那么如何更好地使用图片资源呢？这里我简单讲一下。

目录

• 错误示范
• 通过computed
• 当图片不变的时候直接引入
• 通过css变量切换图片
• 通过css绘制
• 总结

在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。

错误示范

也许你的代码里常常会这样写

<template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xxx.jpg') } } } </script>

在webpack中，require会自动处理资源，这块没问题，但是你放到vue的data里，vue会遍历data，给src加上响应式，但其实大部分时间，这个src并不需要响应式，这里造成了性能浪费。