vue 的 背景图片，为什么斜杠都没有了？

最新推荐文章于 2022-09-20 22:39:49 发布
最新推荐文章于 2022-09-20 22:39:49 发布
阅读量366 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxf_CN/article/details/108364443
版权
本文探讨了在Vue应用中遇到的背景图片路径问题，当从API获取图片路径并设置为HTML背景时，路径中的斜杠消失。通过查看浏览器元素，发现图片路径显示异常。文章旨在分析这个问题的原因并提出解决方案。
摘要由CSDN通过智能技术生成

背景图片的路径问题

在发起请求后，获取到 背景图片的路径：

在这里插入图片描述

然后在 html 中，使用行内式，书写背景图片：

<!-- 图片展示 -->
<div class="banner" :style="{
      'backgrou
最低0.47元/天 解锁文章
zxf_CN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue文本输入框v-model双向绑定手动赋值后文本框中数据不实时显示的问题
weixin_45616483的博客
02-01 2530
vue文本框双向绑定，手工赋值不实时显示的解决方法
CSS问题：background-image中url的斜杠问题
qq_39400014的博客
05-13 1852
CSS问题：background-image中url的斜杠问题一、事由二、分析三、拓展四、参考文章 一、事由 今天在写背景图片时，突然发现图片无法显示出来。但是当我把相对url复制到img中却发现可以显示，等到后来检查的时候，才发现是自己斜杠写错了，被自己蠢哭了，写这篇文章记录一下自己的蠢事。 二、分析 直观点我直接上代码分析 background-image: url("images\bj\circle.png"); //错误，反面教材，url中不能用反斜\杠作为分隔符，必须要用斜杠/ backgrou
subliem text3 输入斜杠"/"会自动删除
光
12-21 1040
今天练手一个vue.js项目时遇到一个问题,在字符串中以"/"开头时,写到第三个字母,"/"会被自动删除,搜索了半天不得,遂自己做起了测试,ctrl+z撤销时发现状态栏提示:Undo:afn delete prfixed slash,终于发现问题所在… 问题就出在插件AutoFileName上,它会自动把这个字符串的斜杠删除;解决方法:在插件AFN的setting-user里添加一行,"afn_us
服务器响应200，但是没有返回，且后端没有收到请求的可能性，是 “/“ 的缺失 ， 关于vue走代理遇到的坑，细节问题
Jonn1124的博客
07-06 2791
代理遇到的问题
vue踩坑--background-image路径问题
热门推荐
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
Vue项目中图片路径反斜杠问题
Jim Suen
11-27 4109
问题描述 打开接手的一个项目中发现背景图不显示，F12后发现路径被解析成了 css background: url(/abc\imgs\background.jpg) no-repeat center; 手动在浏览器中把反斜杠改为斜杠图片正常显示 css background: url(/abc/imgs/background.jpg) no-repeat center; 查看代码，代码中...
Vue项目中设置背景图片方法
08-28
Vue 项目中设置背景图片方法 在 Vue 项目中，设置背景图片是一件非常常见的事情。然而，在项目开发中，我们经常会遇到背景图片无法正确显示的问题。这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了...
vue 动态绑定背景图片的方法
12-29
vue动态绑定背景图片的方法，具体介绍如下所示： 1.backgroundImage && 三目运算符 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + coverImgUrl + ')', backgroundS
vue动态改变背景图片demo分享
12-12
如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> [removed][removed] <style> #bag{ width: 200px;...background-image: url(img
解决vue打包css文件中背景图片的路径问题
10-18
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html 找到背景图片路径,background-image中url找不到路径，背景图像无法显示
weixin_29238147的博客
06-04 5812
在对应的DIV中能够显示图片但是当把路径复制变成内联样式表中的background-image时候在原来图中却不能显示背景图片，在fireBUG中显示URL载入错误，这是怎么回事了？#body_left_secend_1 {width:293px;height:300px;background-image:url(../Images/images...
vue路由配置之有斜杠/和无斜杠的区别
山不在高的博客
06-29 6018
vue路由配置中，有反斜杠 '/' 表示该路由配置的路径是根路径，多次点击时不会叠加路径；如果没有反斜杠，则使用的是相对路径，在路由嵌套时，当多次点击使用了子组件的路由时相对路径会不断叠加，从而使得项目因缺乏路径而崩溃。 ...
vue动态修改打包后的请求路径
月落星河
08-20 3573
需求分析 我们需要在打完dist包以后，去通过打包生成后的index.html去配置它的请求路径，可以解决前端反复打包测试环境和生产环境的问题，也可以解决动态配置请求路劲的问题，我们可以通过后台去动态的修改我们打包好的请求地址 具体实现 我们需要在vue的public页面中将这个地址挂载到window对象上。 因为打包后我们的public文件夹不会进行webpack的解析，所以等打完包后我们就可以去修改这个你挂载的值。 我们直接在这个将你window对象的值赋值给你axios的baseUrl，我这里是做
css实现斜线效果以及vue自带插件打印背景色
李酒酒的博客
11-10 1167
在开发过程中遇到了一个很奇葩的问题，问题要求总结有如下三点： 页面分三部分，上半部分高度不确定，下半部分高度确定，中间部分需要填充除了上半部分和下半部分的区域。 填充方式为斜线。 该页面需要打印出来。 这三个要求随便一个单独实现都不难，难得是全部满足。 首先，中间部分要填充剩下的区域，我采用弹性盒模型去实现。 <div style="height:180mm;display:flex:flex-direction:column"> <div class="top-div" style
vue 插槽的使用
zxf_CN的博客
10-30 3600
1. 组件插槽的作用 父组件向 子组件 传递内容： 不是之前的数据传递，是模板数据的传递 我们平常定义的 组件模板，渲染到页面上是这样的： 比如： 我们的组件模板为 a.vue 要渲染在 b.vue 上，就是这样的： a.vue <template> 我是子组件，要渲染到 b.vue 身上的 </template> a.vue 导入到 b.vue 上； b.vue <template> <!-- 子组件的占位符 --> <a组
vue3.0 + element-plus + 上传图片到七牛云
zxf_CN的博客
08-30 3031
时间： 2021.8.30 ，想在项目中，把上传的图片存储到 七牛云 上，但是发现，七牛云他只给了一个限时 30 天的 cdn，就是在30天后，这个就会取消掉，不知道上传后的图片还有没有在 。需要绑定 备案的域名，就应该可以永久使用了吧，不过我没有 备案的域名，但是还是记录一下 。 1. 创建七牛云账号： 创建账号后，需要实名后，才能开通一个 30 天，内存为 10G 的域名！ 1、创建一个对象存储 空间： 他会让你起一个空间名称，用来存储你的东西！ 地区我选择的是 华南的，访问控制选择 公开的。
wangEditor4 + vue3.0 创建一个基础的 富文本编辑器
zxf_CN的博客
08-13 2140
文章时间：2021.8.13 如果超过太久了，可能文章就会失效了，所以请注意 。 项目场景： 使用 wangEditor 来弄一个 富文本编辑器，实现文章的 添加 和 编辑。 问题描述： 在网上搜了，使用那个富文本编辑器好，于是就找到了这个 wangEditor ，我也不知道 轻量不轻量，反正还好用 。样子的这样的，看图： 因为是使用 vue3.0 来和他搭配，他的官网只有和 html 页面搭配，所以到网上找文章，看了好多、好多，发现咦，为什么我的配置都报错了，他们不好呢 ？ 原来是 他们使用
vue为什么不拦截数组？
最新发布
04-05
Vue.js不拦截数组是因为数组的操作非常频繁，如果每次数组操作都要重新触发一遍响应式更新，会带来很大的性能开销。因此，Vue.js选择不对数组进行拦截，而是提供了一些特殊的数组方法，如push、pop、shift、unshift、splice、sort、reverse等，这些方法都是经过重写的，能够触发响应式更新。同时，Vue.js也提供了一些独立的方法，如$set、$delete等，用于手动触发响应式更新。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值