解决uni-app中image无法作为背景图来使用

最新推荐文章于 2023-10-24 15:57:09 发布
最新推荐文章于 2023-10-24 15:57:09 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： 前端 笔记 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45401346/article/details/105688375
版权

在uni-app中是没有背景图这个属性的，所以就要用上定位的方式将其定位上去，再用z-index来提高层级，如果是将图片铺满整个屏幕的话，那么就要给image套上一个父盒子，再设置父盒子的width：100vw，和height：100vhni-app中是没有背景图这个属性的，所以就要用上定位的方式将其定位上去，再用z-index来提高层级，如果是将图片铺满整个屏幕的话，那么就要给image套上一个父盒子，再设置父盒子的width：100vw，和height：100vh，
（vh,vw是视口宽高，将屏幕分为100单位的vh或vw），然后将图片的样式设置为width和height为100%

if you hold me tight
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp微信小程序的background-image使用
前端程序员、项目经理、人工智能博主
12-03 5443
我们知道微信小程序的图片不能使用本地图片，而必须使用网络图片 <view class="top-wrapper" style="backgroundImage:url(http{{imgURL})}"> 在data绑定imgURL:require(‘static/image/order_detailbj.png’) 如上我使用的是通过view标签设置图片背景的 如果我们想通过image标签也可以 <image :src='http+imgURL'></image> 有
uni-app 富文本编辑 回显富文本和修改富文本！
最新发布
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app 中使用背景图片
haplant的专栏
05-30 9193
uni-app 中采用 image 标签插入背景图片
uni-app: Vue: image做背景 z-index用法
wuwuFQ的博客
01-13 1024
闲话不说！需求：用一张图片做背景，文字在图片上方。 template <view class="item-cell" @click="clickItemCell" id="1"> <image class="item-bgImg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi3%2F1121187960%2FO1CN01XH.
uniapp中 background-image 设置背景图片不展示问题
工作中遇到问题记录
10-24 1527
uniapp中 background-image 设置背景图片不展示问题
uni-app 背景图片处理
Mrswater的博客
07-24 2159
1，在uni-app中想要为一个view添加一个背景图，常规下我们会这样做 然后后发现报错；提示我们使用网络图片，或者base64，或者<image/>标签，（但是有些模块还是需要写成背景图这样方便，所以我们这里可以使用base64） 2,在新建一个scss文件集中管理这些base64的图片 在uni.scss里面引入 在页面里引用 注意：页面内的style标签，不要忘记写lang=scss ；否则就无法引入图片base64编码的变量 ...
uni-app 中使用uni push的demo
02-21
【uni-app 中使用uni push的全面解析】 uni-app是一款由DCloud(海豚浏览器团队)开发的多端统一开发框架，它允许开发者使用Vue.js语法编写一次代码，就能跨平台运行到iOS、Android、H5、小程序等多个平台。而uni ...
uni-app使用微信小程序云函数的步骤示例
10-15
在本教程中，我们将深入探讨如何在uni-app中使用微信小程序云函数。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序...
UNI-APP 中sqlite demo 增删查改
06-24
在 `UNI-APP` 中，我们需要先调用 `sqlite.js` 中的函数来打开数据库，通常会提供一个数据库名称和版本号作为参数。关闭数据库则是在不再需要使用时释放资源，防止内存泄漏。 2. **创建表**： 要创建表，我们需要...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uniapp 背景图
qq_38686150的博客
09-25 903
背景图须知 官网参考链接 使用本地路径背景图片需注意： 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式； 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径 注意：小程序不支持本地图片做背景图 仅仅支持 网络图片 和 base64(需要自己手动转) ba
uniapp设置背景图效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-06 692
设置背景图有时候会报错-用行内解决
uni-app为什么image底部填充不满以及解决办法
青衫折扇的博客
09-25 1921
哦们这次先来看看bug图: 解决办法: image: { display: block; } 最后我们看下完美图: 问题完美解决,有什么问题请下方留言,关注我,谢谢大家的支持
Uniapp设置页面的背景图片
我有故人折剑去，斩尽春风不曾归
03-14 2823
【代码】Uniapp设置页面的背景图片。
uni-app背景图片 background-image，支持 base64 格式图片、支持网络路径图片、本地路径背景图片
热门推荐
JEFF_xieyuzhi的博客
10-12 1万+
背景图片 uni-app支持使用在 css 里设置背景图片，使用方式与普通web项目相同，需要注意以下几点： 支持 base64 格式图片。 支持网络路径图片。 使用本地路径背景图片需注意： 图片小于 40kb，uni-app会自动将其转化为 base64 格式； 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。 ...
uniapp开发微信小程序 ，使用本地图片做背景图应该怎么处理
qq_43468165的博客
02-22 2476
注意，把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错（除了首页之外）。这里就是跟methods和computed特性有关。
Vue uniapp实现图片宽度100%、高度自适应的效果
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
uniapp的nvue背景图
zongxingfengyun的博客
09-24 2903
在nvue中的background不支持url这一个属性 只能是使用image来充当一个背景图 可以使用absolute定位来实现背景图的效果 <image style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;" src="/static/image/logo.png"></image> ...
解决uni-app中image动态绑定本地图片显示不出来的问题
weixin_50240716的博客
02-08 6343
首先在button的点击事件chooseImage中通过uni.chooseImage（{}）上传本地图片，把路径取出来赋值给data中的imgArr 再在iamge中，通过v-for来循环imgArr数组，动态绑定src来显示图片。但图片确显示不出来。 解决方法： this的指向有问题，在chooseImage事件中，先把this取出来，再进行赋值 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值