微信小程序本地图片在开发工具显示手机预览不显示

最新推荐文章于 2024-07-22 18:22:47 发布
最新推荐文章于 2024-07-22 18:22:47 发布
阅读量1.7w 收藏 18
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序 base64
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44052055/article/details/119408920
版权
微信小程序中，本地图片在开发工具显示正常但手机预览无法显示。问题在于`background-image`只能接受网络URL或base64编码。解决方案包括：1) 使用`image`标签直接加载本地图片；2) 将本地图片转为base64编码，通过`wx.getFileSystemManager().readFile`方法实现。转换后记得添加base64前缀。
摘要由CSDN通过智能技术生成

微信小程序在设置背景图片时，使用本地路径，手机预览无法显示。

首先检查图片的路径，是否有中文，都没有问题的时候，看插入背景图片格式采用background-image：

即：

<view class="content" style="background-image:url('../static/11.png')">

background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

1.直接使用image标签

<image class='userBg' src='../../../images/my_bg.jp
最低0.47元/天 解锁文章
小朱小朱绝不服输
关注
专栏目录
微信小程序的background在手机不显示
WYH1205的博客
07-30 1755
微信小程序的背景图片在微信开发者工具中正常显示，但是在手机端不显示图片。 设置图片全屏样式 style="background:url('https://api.plus.123rf.com.cn/as/46406114.jpg');background-size:100% 100%;" .container{ width:100vw; height:100vh } 在手机端不显示的原...
微信小程序点击图片预览真机无法显示的问题
皮皮的博客
08-27 1701
问题： 用开发者工具开发编辑时，点击图片预览，一直显示黑屏加载转圈中… 如图所示： 实际效果图： 话不多说，直接上代码 1、html代码： <view class="img-box"> <view class="imgs" wx:for="{{imgList}}" wx:key='id'> <image src="{{item.imgurl}}" bindtap="clickImg" data-url="{{item.imgurl}}" /&gt
微信小程序-图片展示源码
10-25
微信小程序-图片展示源码。资源中包含了详细的系统图文搭建教程。源码都是实际项目，经过测试可以正常稳定运行在服务器，需要具备基础服务器搭建知识，不会搭建的请谨慎购买。
微信小程序真机不显示图片【三个解决方案】
热门推荐
04-26 2万+
今天网友在开发小程序中遇见一个很奇怪的问题，就是编辑器编译后可以正常显示项目图片，但是当真机预览时却不显示图片。针对这个问题经过对比、尝试算是找到了问题的原因。下面将最近真机不显示的情况进行一下汇总： 1.本地图片文件名称中包含中文： 像上面图片，文件名称为中文，代码里面即使将文件路径设置正确同样真机不会显示图片。这个问题之前遇见过，不知道现在wx是否解决了这个问题。 2.本地图片文件名称中后缀大小写不统一： 当本地图片的后缀名出现有大写、有小写时就要注意了，代码中写的文件路径为小写时，就会出现真机不显
【微信小程序】微信小程序设置本地背景图片在真机无法显示的解决方案
最新发布
九日的博客
07-22 1459
使用网络图片：将图片上传到服务器，然后在 CSS 中引用网络地址。使用 Base64 编码：将图片转换为 Base64 编码，然后在 CSS 中引用。使用标签代替：在 WXML 文件中使用标签来显示图片。
微信开发者工具模拟器中图片无法显示
hj3350631373的博客
06-06 5209
微信小程序开发时预览的图片无法显示
微信小程序背景图片真机不显示问题
红叶落水的博客
02-22 5640
问题描述 ： 开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示 但是真机预览，不显示。 解决方式： 1.图片路径以http开头时，可以显示。所以，可以将图片放到微信云端，直接引用云id; 没钱的话，把多张图片放到一个压缩包里，压缩包放到云端储存；然后下载下来，保存到本地，再从本地引用即可；（实测，安卓没啥问题，苹果还是不显示） 2.将图片路径转化为Base64格式 Backgrou
微信小程序背景图片无法在手机上显示
robin_sky的博客
06-26 4550
一： 将图片在网站上转换为base64格式，然后再设置 【将图片转换为base64网站】http://imgbase64.duoshitong.com/ .userInfo{ width: 800rpx; /*高宽大小根据个人情况自己调试*/ height: 1150rpx; background-repeat:no-repeat; /**...
微信小程序背景图片background无法在手机端显示问题解决方案
qq_38829237的博客
05-15 8042
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背景图片直接使用本地图片: 小程序page 代码如下: 这种写法能在web开发工具端调试时候正常显示背景图片,手机端不能正常显示 解决方法: 第一种: 使用服务器图片地址显示 第二种: 将图片转换成ba...
微信小程序 解决请求服务器手机预览请求不到数据的方法
08-31
在微信小程序的开发过程中，有时候会遇到一个棘手的问题，即在手机预览时请求服务器数据失败，而在微信开发者工具中却能正常获取。这个问题的关键在于服务器配置与微信小程序的安全域名设置不匹配。本文将详细解析这...
微信小程序开发-闹钟小程序
05-13
5. 数据存储：为了保存用户的闹钟设置，可以利用微信小程序的本地数据存储API（wx.setStorageSync / wx.getStorageSync）将闹钟数据保存在本地。 六、调试与发布 开发过程中，使用微信开发者工具进行实时预览和调试...
微信小程序点餐系统微信小程序开发实战
06-07
小程序基于JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）进行开发，可以调用微信提供的API实现丰富的功能。 二、点餐系统需求分析 点餐系统需具备以下功能： 1. 菜单展示：展示餐厅菜品，...
background-image 微信小程序--背景图片手机无法预览
飞翔的熊blabla
05-03 4573
本地资源无法通过 WXSS 获取background-image：可以使用网络图片，或者 base64，或者使用&lt;image/&gt;标签目前小程序好像没有支持手机预览背景本地图片，所以将本地图片改为网络图片链接就可以了background: url("https://..../img/no.png") no-repeat;...
微信小程序中的图片在开发者工具中、能正常显示，在真机体验的时候不能正常显示
weixin_43990624的博客
07-12 8432
1、先确定路径是否正确、图片名称中没有空格、url中没有中文 2、如果路径正确尝试这样修改 3、还可以把图片上传到服务器(http/https小写) 4、图片的后缀使用小写 .png/.jpg 5、使用base64的格式 ...
微信小程序使用本地图片在真机预览不显示的问题解决
dmx1521856051的博客
02-14 7266
1、将绝对路径改成相对路径；2、图片URL不要使用中文；3、域名服务器需要备案；4、图片名称不要有空格；5、图片后缀改为小写。
微信小程序图片不显示，模拟器可以显示解决
HAPPYDAY048的专栏
08-29 3044
微信小程序开发时开发工具自带的模拟器可以正常显示，但是手机上面体验版查看居然没有图片， 经过查阅资料发现如下文档导致图片不显示： 1.本地图片是用image加载的：src="../../../images/ic_header.jpg"  这样不能显示，应改为：https://........jpg 2.图片的url里面有中文 3.图片的HTTP应为小写的http以及图片的后缀为小写的.pn...
小程序上线发布后图片不显示
zwh2487577416的博客
03-15 4060
小程序上线发布后图片不显示的解决办法
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值