在Vue页面中如何更优雅地引入图片详解
更新时间：2021年12月09日 11:24:17 作者：前端冒菜师
我们在Vue.js项目中经常需要引用图片,所以下面这篇文章主要介绍了关于在Vue页面中如何更优雅地引入图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
在我们写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
总结
到此这篇关于在Vue页面中如何更优雅地引入图片的文章就介绍到这了,更多相关Vue更优雅引入图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue 2.X的状态管理vuex记录的相关资料，文中介绍的非常详细，对大家的理解和学习具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了VUE多个DIV绑定回车事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-10-10
这篇文章主要介绍了vue项目如何配置public静态资源路径访问方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文主要介绍了使用pyscript在网页中撰写Python程式的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
今天小编就为大家分享一篇vue加载完成后的回调函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Vue 3 使用moment设置显示时间格式的问题及解决方法
在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method),本文给大家介绍Vue 3 使用moment设置显示时间格式的问题及解决方法,感兴趣的朋友一起看看吧2023-12-12
vue项目出现ERESOLVE could not resolve问题及解决
这篇文章主要介绍了vue项目出现ERESOLVE could not resolve问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue组件教程之Toast(Vue.extend 方式)详解
这篇文章主要给大家介绍了关于Vue组件教程之Toast(Vue.extend 方式)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
最新评论