如何在Vue页面中优雅地实现图片引入与详解的优化？

本文共计756个文字，预计阅读时间需要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并不需要响应式，这里造成了性能浪费。

通过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("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

总结

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