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