vue怎么导入图片,vue使用require引入的图片
我们在Vue.js项目中经常需要引用图片，所以下面这篇文章主要介绍如何在Vue页面中更优雅的引入图片的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
通过计算显示错误。当图片不变时，直接通过css变量引入来切换图片。通过css画图总结，在我们的vue项目中肯定会用到各种图片，那么如何更好的利用图片资源呢？这里我就说说我常用的方法。
错误示范
也许这经常写在你的代码里。
模板
img :src=src
/模板
脚本
导出默认值{
data(){
返回{
src: require(xxx.jpg )
}
}
}
/脚本
在webpack中，require会自动处理资源，这个没问题，但是当你把它放到vue的数据中时，vue会遍历数据，增加对src的响应。但实际上大多数时候，这个src并不需要响应，这就造成了这里的性能浪费。
通过computed
上述错误的解决方案是以下解决方案之一：计算
模板
img :src=src
/模板
脚本
const src=require(xxx.jpg )
导出默认值{
计算值：{
src(){
返回src
}
}
}
/脚本
Computed有自己的缓存，可以减少一些性能浪费。
当图片不变的时候直接引入
模板
img :src=src
/模板
或者
模板
div class=bg/div
/模板
风格。血糖
背景：url(xxx.jpg )
}
/风格
当我们的画面不会改变时，可以直接引入，不需要赋值变量。
同样，最好通过切换类名来动态显示图片。
模板
div :class=flag？bg1:bg2/div
/模板
脚本
导出默认值{
data(){
返回{
标志：正确
}
}
}
/脚本
风格
. bg1{
背景：url(xxx1.jpg )
}
. bg2{
背景：url(xxx2.jpg )
}
/风格
通过css变量切换图片
这只是我刚想起来的一个想法。理论上css变量可以存储任何东西，那么可以存储图像地址吗？
模板
div class=bg/div
/模板
脚本
导出默认值{
已安装(){
//第一个方法，图像地址或base64
这个。$el.style.setProperty( - bg ，` url(http://xxx.com/1.jpg )`)
//第二种方法
这个。$el.style.setProperty( - bg ，` URL($ { require(./assets/1.png)} )`)
}
}
/脚本
风格。血糖
-BG:URL( XXX . jpg )；
背景-图像：-BG；
}
/风格
如果个人测试成功，这个方法也可以使用，而且会比计算好。毕竟操作css变量花费更少。这个方法需要注意的是，css中的图片一般都是用URL写的，所以需要拼接一个字符串URL(你的内容)。
通过css绘制
其实这是题外话。有时候，有些图像其实是可以用css来绘制的，比如下图中的三角形。你百度一下，就会有各种css三角形生成器。这种图形最好使用css，而不是引入一个图像。
综上所述，就是不要把图片引入vue的数据，或者尽量用css。
总结
关于如何在Vue页面中更优雅地介绍图片的这篇文章到此为止。更多相关Vue，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。