位置: IT常识 - 正文

vue踩坑--background-image路径问题(vue backbone)

编辑:rootadmin
vue踩坑--background-image路径问题         在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue项目中,如果如下面代码填写路径会找不到图片

推荐整理分享vue踩坑--background-image路径问题(vue backbone),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue backbone,vue beautify,vue background,vue backbone,vue background,vue backbone,vue backbone,vue踩坑记,内容如对您有帮助,希望把文章链接给更多的朋友!

        项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./',然后哪些没有转成base64的背景图都失效了。

<script type="text/javascript">import TemplateNav from './TemplateNav'export default {name: 'FooterNav',components: {'TemplateNav': TemplateNav},data() {return {//使用相对路径会找不到图片shouye:'url(../../assets/images/shouye/index2x.png)',fenlei:'url(../../assets/images/shouye/fenlei2x.png)',search:'url(../../assets/images/shouye/search2x.png)',shopcart:'url(../../assets/images/shouye/gouwuche2x.png)',mine:'url(../../assets/images/shouye/I2x.png)'}},props: {num: {default: '0'}},}</script>

 报错如下:404(Not Found)

vue踩坑--background-image路径问题(vue backbone)

 正确的路径应该如下面这样

data() {return {shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'}},

使用require()方法,require()是node.js方法。

结合实际情况,处理方法如下:

img标签:

<img :src="require('../../../assets/images/icons/icon-add-pc.svg')">

背景图:

<div :style="{backgroundImage:'url('+require('../../../assets/images/icon/icon-add-pc.svg')+')'}"></div>//i标签<i :style="{backgroundImage:'url('+require('../../assets/home/ic-0-01.svg')+')'}"></i> 扩展:图片格式(base64)

        图片的base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url。

使用base64图片的优点:减少http请求次数采用base64的图片随着页面一起下载,因此不会存在跨域请求的问题没有图片更新要上传图片,因此不会造成清理图片缓存的问题。使用base64图片的缺点:增加css文件的大小,比http请求大30%左右浏览器兼容性,支持ie10及以上解析css的时间增长base64图片与csssprites技术

        精灵图技术就是将图片合成一个大的图片,将多次图片请求合成一张大的请求,以此来达到减少http请求的次数。

对于base64图片常见误区

        base64虽然有优点,但是其缺点也很明显,在使用上存在一些明显的缺陷

使用base64不代表性能优化,使用base64减少了http请求,但是增加了css文件的体积,css文件体积增大意味着CPR的阻塞CPR(Critical Rendering Path,关键渲染路径):当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”。图片不会导致关键路径的阻塞,而转换为base64后大大增加了css文件的体积,css文件的体积直接影响渲染,导致空白屏幕时间增长,html和css会阻塞渲染,而图片不会阻塞渲染。

感谢分享:vue踩坑系列——backgroundImage路径问题_MoLvSHan的博客-CSDN博客_background-image 相对路径 感谢分享:vue项目中打包background背景路径问题 - 这个男人 - 博客园

本文链接地址:https://www.jiuchutong.com/zhishi/297267.html 转载请保留说明!

上一篇:PHP批量获取网页中所有固定种子链接的方法(php获取网站html代码)

下一篇:vue3.0中setup使用(两种用法)(vue set up)

  • 全国税收调查表企业表怎么填
  • 进项税额的计税基础是什么
  • 一般纳税人开具的普票可以抵扣吗
  • 税收的自动稳定性主要表现在什么制度
  • 记账错误怎么办
  • 加班餐费有发票怎么入账
  • 小企业周转材料报废残值回收应计入管理费用
  • 申请增值税专用发票需要什么资料
  • 上月未计提税金,下月怎么做分录
  • 补助属不属于工资
  • 开业赠送礼品会计属于什么费用
  • 单位公积金可以拖欠多长时间缴
  • 税后工资反推税前工资计算方法
  • 企业所得税季报营业收入,营业成本怎么填
  • 花椒油的税率
  • 宣传费开票属于什么费用
  • 报个税失业保险怎么填
  • 公司注销后是不是就不再接受诉讼
  • 其他专项收入怎么做账
  • 固定资产改造更新是否需要计提折旧
  • mac怎么安装dmg软件
  • 鸿蒙系统获取电脑文件
  • php页面传值
  • 怎么用onekey重装系统
  • 企业长期借款的利息,有可能计入的科目有( )
  • 归还银行借款摘要模板
  • PHP:diskfreespace()的用法_Filesystem函数
  • vue3+ts+vite
  • 生产成本和库存商品的区别
  • eslint不起作用
  • php判断是否连接数据库
  • chkconfig命令参数
  • 买税盘的会计分录
  • 帝国cms怎么上传图片
  • 企业所得税本期已预交怎么算
  • 支付贷款利息属于筹资活动吗
  • 什么是稳岗补贴是给企业发放吗
  • 软件开发公司如何保护源码
  • mysql使用指南
  • mongodb 权限设置
  • 将房产以股权形式出售
  • 高速费会计分录怎么写
  • 增值税申报表填错不影响税额
  • 差旅费抵扣所得税标准
  • 注销公司需要承担什么责任
  • 个人所得税年度累计扣税规则
  • 存货跌价准备在年报哪里
  • 增值税 附加税费
  • 公司注销开户许可证是不是要上交
  • 如何算增值税金额
  • 企业项目贷款所需资料
  • 序时账是明细账吗
  • 固定资产公司
  • 工业企业自制半导体材料
  • 排序mysql
  • rhel安装mysql
  • win10预览版选哪个
  • centos安装类型选择
  • win8怎么设置定时关机
  • centos cpu 内存
  • 写出linux安装的详细步骤
  • linux操作系统主要学什么
  • win8功能
  • win7系统运行怎么打开
  • win7共享按钮灰色
  • linux xfs 扩容
  • unity3d读取gis数据
  • 单线程语言有哪些
  • jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
  • 信号监控设备是什么
  • linux shell获取ip地址
  • linux shell 输出到文件
  • python理论基础
  • js修改url
  • js面向对象的三大特性
  • android8.0特性
  • 变更税务局三方协议
  • 不配合税务检查的法律责任
  • 城镇土地使用税按月还是按年交
  • 广西壮族自治区图书馆
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设