Vue+elementUl div背景图无法显示 无法渲染

已于 2023-08-03 14:54:26 修改
阅读量429 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2023-08-03 14:51:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60457220/article/details/132083445
版权

1.后端传给前端的url里面有空格导致无法渲染。使用正则表达式。

动态div加背景图片。使用正则表达式把空格替换为20%。因为url会把地址中的空格转换成%20，这是url编码的表示方式，对于每个字节，可以用%后面跟ASCII码的两位十六进制值表示，根据URL的编码：空格的ASCII码是20，%表示采用ASCII码，%20就表示这是一个空格了。

<div class="i-col2" :style="{backgroundImage: 'url('+item.thumbUrl.replace(/\s+/g, '%20')+')'}"></div>

白野泽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vuejs项目里css引用背景图片不能显示的问题
12-12
解决：build->utils.js里，修改：增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也
vue+springboot图片上传和显示的示例代码
10-15
在本文中，我们将深入探讨如何实现一个基于Vue和Spring Boot的应用程序，该应用程序支持图片的上传和显示。这个示例代码适用于那些希望在前后端分离的项目中集成类似功能的开发者。 首先，让我们关注前端部分，它...
关于vue前端项目图片背景出不来【已解决】
阿丹的博客
05-26 2689
阿丹场景描述：之前在写个人博客的网站的时候使用vue来完成前端，发现背景图片出不来，尝试了很多办法，从晚上查找了很多个方法但是都出不来。根据其他博主的方法成功实现了。阿丹将方法提供出来。发现解决这个问题有很多需要付费的文章。
解决Vue中动态渲染图片路径报错问题
weixin_75115821的博客
10-26 607
今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。其中说到了直接路径会编译为 require('./image.png')这类资源将会直接被拷贝，而不会经过 webpack 的处理。代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。这样图片就能成功渲染了，不在出现路径错误。
【解决】Vue3 background-image:url()不显示问题
qq_22334245的博客
10-14 3448
使用vue3时想给一个div设置背景图片，一开始把background-image:url(xxx/xxx.png)写在了div的style里，背景图片怎么也显示不出来。图片路径也确认过没有问题。给div添加了class属性，并把background-image:url(xxx/xxx.png)改写到中，背景就可以显示了。
vue v-for 中 img图片渲染不出来的解决方法
jjw_zyfx的博客
09-24 3330
vue v-for 中 img图片渲染不出来的解决方法
div背景图片或颜色不显示的解决办法
热门推荐
某年某月某条街
08-10 1万+
div背景图片或颜色不显示的解决办法背景图片不显示的原因主要有以下几个方面：css没有被调用 css图片地址不对 div的高度没有固定，是auto、没有设值或者高度不够 div被嵌套 div代码不规范解决办法：DIV高度为自动，背景颜色无法显示，在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important；同时还可以兼容 IE6、7、8
毕设 基于vue+axios+vue+router+elementul+nodejs+mysql实现一个管理系统项目.zip
10-24
matlab算法，毕设、课设程序，全部源码均已进行严格测试，可以直接运行！ matlab算法，毕设、课设程序，全部源码均已进行严格测试，可以直接运行！ matlab算法，毕设、课设程序，全部源码均已进行严格测试，可以直接...
vue+三维GIS地图
12-08
此实例为vue版本三维GIS地图，其中包含底图切换、图层控制、图上量算、空间分析、坐标定位、图上标绘、地图打印等功能
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
Vue+ElementUI实现表单动态渲染、可视化配置的方法 本文主要介绍了使用 Vue+ElementUI 实现表单动态渲染、可视化配置的方法。该方法可以实现动态渲染表单、可视化配置，满足不同场景下的需求。 一、动态渲染的概念...
vue+高德地图实现地图搜索及点击定位操作
10-14
<div id="iCenter"></div> <!-- 获取当前位置和名字的按钮 --> ... </div> ``` 在Vue组件的`<script>`部分，我们需要定义组件的属性和方法。`address`用于存储当前输入的地址，`map1`和`map`用来保存地图对象...
（转载自用）vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
weixin_46446301的博客
09-26 1993
转载用到的坑Vue图片渲染问题
Vue 绑定内联样式设置背景图片不显示
qq_46278368的博客
08-20 291
Vue 绑定内联样式设置背景图片不显示
vue循环渲染本地路径图片不显示问题
欢迎欢迎
01-07 746
写代踩到过的坑，分享一下上代码 <template> <div class="swipe"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item, index) in src" :key="index"> <img :src="item" alt=""&gt
vue里面的img，其中src的地址不变，则不渲染
qq_36606438的博客
05-24 203
【代码】vue里面的img，其中src的地址不变，则不渲染。
Vue项目解决行内添加背景图片无法显示的问题
最新发布
ssxx_zzyy_baba的博客
01-23 724
确保 require('@/assets/images/background.jpg')使用字符串拼接，我们将背景图片的路径作为模块导入。废话不多说，直接上代码。绑定将行内样式应用到。
vue3循环遍历图片渲染无效果
limif的博客
10-18 2026
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
解决vue中img或元素背景图片无法显示或路径错误问题
WanweI897的博客
08-01 4857
解决vue中img或元素背景图片无法显示或路径错误问题。
vue3本地src图片循环渲染不显示？
はんみん的博客
09-04 1693
有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。
vue +elementul实现展开和收起功能
10-12
vue和element-ui库提供的element-UI组件可以很容易地实现展开和收起功能。 首先，我们可以使用element-ui的Collapse组件来创建一个可收缩的容器。在需要收起和展开的元素外面包裹一个<Collapse>标签，在其中添加<CollapseItem>标签作为子组件。例如，我们可以像下面这样定义一个简单的容器： ``` <template> <div> <el-collapse v-model="activeNames"> <el-collapse-item title="点击展开内容" name="1"> <p>这是展开的内容</p> </el-collapse-item> </el-collapse> </div> </template> ``` 在这个例子中，点击标题的时候，内容会展开或者收起。 此外，我们还可以用element-ui的按钮组件<Button>来实现展开和收起的功能。我们可以在按钮的click事件中，通过改变一个data中的boolean值来控制展开和收起。例如： ``` <template> <div> <el-button @click="toggleCollapse" type="primary">{{ isCollapse ? '展开' : '收起' }}</el-button> <el-collapse v-model="isCollapse"> <el-collapse-item title="内容" name="1"> <p>这是展开的内容</p> </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { isCollapse: false }; }, methods: { toggleCollapse() { this.isCollapse = !this.isCollapse; } } }; </script> ``` 在这个例子中，点击按钮会切换展开和收起状态，并且按钮上的文本也会相应地改变。 综上所述，借助于vue和element-ui的组件，我们可以轻松地实现展开和收起功能。通过Collapse组件或者按钮组件，我们可以根据具体需求选择合适的方式来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值