位置: 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)

  • 微信“搜一搜,如何进行关键词布局抢占流量(微信搜一搜广告投放)

    微信“搜一搜,如何进行关键词布局抢占流量(微信搜一搜广告投放)

  • 女生玩气球视频(能上网qq上不去)(玩气球的小女孩舞蹈完整版)

    女生玩气球视频(能上网qq上不去)(玩气球的小女孩舞蹈完整版)

  • qq密保申诉需要好友密码吗(qq密保申诉需要好友辅助吗)

    qq密保申诉需要好友密码吗(qq密保申诉需要好友辅助吗)

  • wps分隔符号在哪里(wps中的分隔符在哪)

    wps分隔符号在哪里(wps中的分隔符在哪)

  • 华为p40手机发热怎么办(华为p40手机发热怎么办解决)

    华为p40手机发热怎么办(华为p40手机发热怎么办解决)

  • mate30能无线充电吗(mate30无线充电怎么用)

    mate30能无线充电吗(mate30无线充电怎么用)

  • 苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

    苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

  • 全网通手机可以放两张移动卡吗(全网通手机可以装广电卡吗)

    全网通手机可以放两张移动卡吗(全网通手机可以装广电卡吗)

  • QQ情侣空间邀请多久失效(qq情侣空间邀请多久过期)

    QQ情侣空间邀请多久失效(qq情侣空间邀请多久过期)

  • 网关wifi是什么意思(网关无线是啥)

    网关wifi是什么意思(网关无线是啥)

  • 京东账号手机号换了怎么登录(京东账号手机号注销了怎么办)

    京东账号手机号换了怎么登录(京东账号手机号注销了怎么办)

  • 手机上可以分享屏幕吗(手机上可以分享的软件)

    手机上可以分享屏幕吗(手机上可以分享的软件)

  • 怎么弄微信小程序卖东西(怎么弄微信小程序收款)

    怎么弄微信小程序卖东西(怎么弄微信小程序收款)

  • 小米cc9屏幕是什么材质(小米cc9屏幕参数)

    小米cc9屏幕是什么材质(小米cc9屏幕参数)

  • oracle默认用户名和密码(oracle的默认用户名)

    oracle默认用户名和密码(oracle的默认用户名)

  • 为什么有些软件会闪退(为什么有些软件明明有,就是找不出了)

    为什么有些软件会闪退(为什么有些软件明明有,就是找不出了)

  • ipad可以插电信卡4g吗(ipad可以插电信卡吗)

    ipad可以插电信卡4g吗(ipad可以插电信卡吗)

  • 抖音视频怎么添加本地音乐(抖音视频怎么添加商品链接)

    抖音视频怎么添加本地音乐(抖音视频怎么添加商品链接)

  • 小米手机6支持快充吗(小米手机6支持电信卡吗)

    小米手机6支持快充吗(小米手机6支持电信卡吗)

  • 快手直播伴侣怎么录制视频(快手直播伴侣怎么放音乐)

    快手直播伴侣怎么录制视频(快手直播伴侣怎么放音乐)

  • 打开手机就是新闻资讯怎么删除(手机刚打开就有新闻是怎么回事)

    打开手机就是新闻资讯怎么删除(手机刚打开就有新闻是怎么回事)

  • vivox27可以开空调吗(vivox27pro可不可以开空调)

    vivox27可以开空调吗(vivox27pro可不可以开空调)

  • 锤子手机怎么使用无限屏功能(锤子手机怎么使用灵动岛)

    锤子手机怎么使用无限屏功能(锤子手机怎么使用灵动岛)

  • 一加7与一加7pro的区别(一加7与一加7pro怎么选)

    一加7与一加7pro的区别(一加7与一加7pro怎么选)

  • web前端开发期末大作业 ——个人主页(可自取源码)(web前端开发学什么)

    web前端开发期末大作业 ——个人主页(可自取源码)(web前端开发学什么)

  • YOLOv5输出端损失函数(yolov3输出是什么)

    YOLOv5输出端损失函数(yolov3输出是什么)

  • 个人独资企业和个体工商户的税收区别
  • 经营租赁的税务编码是什么
  • 销售扣款怎么开票
  • 长期应收款在资产负债表中填在哪里
  • 邀请客户参加公司会议
  • 占用农村宅基地建豪宅
  • 代扣代缴个人所得税手续费是否缴纳增值税
  • 年报中纳税总额怎么填
  • 收到国债本金和利息会计分录
  • 权益资本成本率计算
  • 民办非营利组织幼儿园清算时固定资产如何处理
  • 营业执照首次年报
  • 固定资产进项税额转出怎么做账务处理
  • 资产负债表写错数字怎么改
  • 工会经费申报网址是什么
  • 民营医院实收资本科目
  • 白条入账会给什么处分
  • 其他权益工具投资属于什么科目
  • 现金日记账余额为零要怎么填
  • 西方会计要素有哪些
  • 罚款应该计入营业所吗
  • vue编写网页
  • layui表格编辑功能
  • 梅德威海滩棕榈树间散步的冲浪者,印尼巴厘岛 (© helivideo/GettyImages)
  • 待摊费用和预提费用属于什么账户
  • PHP:imageantialias()的用法_GD库图像处理函数
  • 三级菜单python
  • php获取指定日期的时间戳
  • 房产税是什么意思,简单的回答
  • idea如何运行springboot项目
  • 企业所得税征前减免是什么意思
  • 计算机专业的毕业设计作品新颖
  • 支付网络服务费属于现金流量表的哪一项
  • 股权转让 减资
  • 发票认证的目的和意义
  • 代开发票是否代征城建税和教育费附加?
  • 企业从政府部门辞职流程
  • 亏损企业研发费用可以加计么
  • 电汇汇款方式的基本流程
  • 资产负债表跟利润表勾稽关系公式
  • 小企业资本公积的来源有
  • sql server数据
  • 结转成本时库存商品是负数
  • mysql数据库性能优化方法有哪些
  • linux安装ms
  • 金税四期视频
  • 小规模城建税和教育费附加分录
  • 出借和出租包装物会计分录是什么
  • 社保退回的款怎么入账
  • 公司班车费用如何入账
  • 电子增值税发票样本
  • 卖二手车买卖
  • 包工包料工程预付款的支付比例
  • 一次性伤残就业补助金怎么领取
  • 支付的管理费用调到其他应付款怎么做账
  • 油费可以进项抵税吗
  • 联营公司是关联方吗
  • 备抵法核算坏账损失
  • 出口退税怎么回事
  • mysql order by desc
  • sql中将数据放到另一个表中
  • solaris 安装
  • linux wk
  • linux中安装软件可使用哪些方式
  • gsicon.exe是什么进程 作用是什么 gsicon进程查询
  • 电脑window8系统怎么样
  • linux系统设置
  • windows7无法继续安装
  • android真机调试解析包错误
  • dom教程
  • linux压缩命令compress
  • linux命令sed的用法
  • 百度地图给map添加
  • 批处理系统的进程调度算法
  • jquery属性选择器的基本
  • 税务被风控了多久才会解除
  • 国税怎么打印申报表
  • 湖北税票真伪查询
  • 纳税人欠缴税款怎么办
  • 网上怎么变更
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设