uni-app开发微信小程序之background-image

最新推荐文章于 2024-07-03 15:34:14 发布
最新推荐文章于 2024-07-03 15:34:14 发布
阅读量1w 收藏 3
点赞数 1
分类专栏： uni-app 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42303960/article/details/106528125
版权

用uniapp开发app时使用background-image属性设置本地图片能正常显示，但在开发微信小程序中使用background-image时在开发者工具中正常，但在真机调试中居然无法显示，在查阅官方文档后发现在这里插入图片描述在小程序中不支持使用相对路径，后根据官方解释尝试以下两种方法
1.转为base64格式图片菜鸟工具在线转base64.xxx{ background-image:url('data:(此处为转码后的代码)'}
2.把图片上传到测试服务器
以上两种情况都可以实现

大食怪
关注
专栏目录
uniapp微信小程序的background-image使用
前端程序员、项目经理、人工智能博主
12-03 5813
我们知道微信小程序的图片不能使用本地图片，而必须使用网络图片 <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开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
热门推荐
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
uniapp，使用css设置背景宫格
最新发布
m0_71513265的博客
07-03 331
uniapp，使用css设置背景宫格。
uni-app背景图片 background-image，支持 base64 格式图片、支持网络路径图片、本地路径背景图片
JEFF_xieyuzhi的博客
10-12 1万+
背景图片 uni-app支持使用在 css 里设置背景图片，使用方式与普通web项目相同，需要注意以下几点： 支持 base64 格式图片。 支持网络路径图片。 使用本地路径背景图片需注意： 图片小于 40kb，uni-app会自动将其转化为 base64 格式； 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。 ...
uniapp中 background-image 设置背景图片不展示问题
工作中遇到问题记录
10-24 1812
uniapp中 background-image 设置背景图片不展示问题
uni-app踩坑之background-image
weixin_45267702的博客
11-24 3877
uni-app踩坑之background-image css写法 js写法 注意： url(${ImgBdg}) <view class="background":style="{backgroundImage:`url(${ImgBdg})`,backgroundSize: 'cover',}">
uni-app 中使用背景图片
骑大马挎大刀
09-13 6077
一 : H5 上使用(但是在微信小程序中报错)1,使用网络图片(对不同环境需要不同配置)，2,或者 base64(需要本地转换)，uni-app 中使用背景图片。二 : 微信小程序中可以。
uni-app开发微信小程序.zip
07-02
【uni-app开发微信小程序】结合了两者的优势，使得开发者可以通过uni-app来开发微信小程序。这主要体现在以下几个方面： 1. **组件化开发**：uni-app支持Vue.js的组件化开发模式，使得代码结构清晰，易于维护。...
使用uni-app开发微信小程序的实现
10-15
标题“使用uni-app开发微信小程序的实现”表明本文将深入探讨使用uni-app框架来开发微信小程序的整个过程，并通过实例代码进行详细解说，使之成为其他开发者在学习或工作中可以借鉴的资料。 描述部分强调了内容的...
uni-app使用微信小程序云函数的步骤示例
10-15
uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序平台上运行的后端逻辑，开发者可以在云端编写和执行代码，无需搭建...
uni-app 开发 微信小程序 优选商城
02-24
利用 uni-app 技术实现微信小程序的开发，进而实现了一次开发多端部署。 优选商城拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。 涵盖了分包、vuex、组件化开发等核心技术点的使用。 注：...
uniapp 循环背景 background-image
geniusbluesky的博客
03-20 1798
uniapp vue 循环加background-image
uni-app——uni-app background-image 绑定变量写法
qq_43201350的博客
01-26 877
uni-app——uni-app background-image 绑定变量写法
uniapp使用背景图片
qq_50386946的博客
08-10 479
在具体页面中添加 标签。
uni-app - - - - - 小程序使用background-image无效？
Dark_programmer的博客
04-11 4983
小程序使用background-image无效
uni-app设置背景图片，backgroundImage
qq_19484091的博客
06-10 1万+
HTML部分代码 <view class="shangpin_teacher_pic" :style="{backgroundImage: 'url(' + pic_url + ')'}">
uniapp动态绑定背景图片
Trainer2107的博客
11-30 1023
【代码】uniapp动态绑定背景图片。
uni-app开发微信小程序登录模块：模拟授权弹框实现
"这篇教程详细介绍了如何在使用uni-app开发微信小程序时处理登录模块，特别是针对微信小程序官方更新后，wx.getUserInfo接口无法直接弹出授权询问框的问题。开发者需要采取新的策略，如使用<button open-type=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值