微信小程序背景图无法显示

扼流挽

于 2024-08-31 16:39:54 发布

阅读量781

点赞数 2

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/zbz00720/article/details/141754657

版权

文章目录

不知道有没有人跟我一样，刚接触微信小程序，在写代码的时候，背景图莫名奇妙不显示。
网上有很多解决方法，比如转 base64 ，网络图片地址等等，但我觉得都太麻烦了，这里直接给出我的解决方法

在这里插入图片描述
用 WXS 做个字符串变量，存放你的图片路径地址，然后插值到标签上就可以了。
（还可以直接把 background 也一起放进变量里，不过那样写路径时就没有提示了）
由于 WXS是属于视图层的，所以也不用担心会影响加载速度。
下面是完整代码
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

扼流挽

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序设置背景图片不显示问题解决方法

Ghjkku的博客

07-22

13万+

微信小程序设置背景图片不显示问题解决方法

微信小程序背景图不显示问题

思渝崖

05-30

713

微信小程序背景图不显示问题

参与评论您还未登录，请先登录后发表或查看评论

微信小程序不能显示本地图片？

capfmud的专栏

06-07

1944

测试一下网络图片

微信小程序背景图片不显示

Be myself

11-08

4547

1.写在 wxss 中的background-image 不显示。 2.<navigator url='' style='background-image:url(../../images/bj.png);background-size:18rpx 33rpx;'></navigator> 这样写，开发工具可以显示，但是在真机上不显示。 ...

【小程序】小程序不显示oss，cos的图片问题

最新发布

m0_52687650的博客

08-26

202

由于网站图片都上传在了腾讯云COS，微信小程序端不显示网站图片原因：腾讯云COS启用了防盗链，需要在白名单添加微信服务的链接。原因是后端没有把小程序的请求域名放到白名单中，域名固定为：https://servicewechat.com。把此https://servicewechat.com链接加入到防盗链中就可以访问。后端开启oss防盗链设置。

微信小程序真机不显示图片【三个解决方案】

04-26

2万+

今天网友在开发小程序中遇见一个很奇怪的问题，就是编辑器编译后可以正常显示项目图片，但是当真机预览时却不显示图片。针对这个问题经过对比、尝试算是找到了问题的原因。下面将最近真机不显示的情况进行一下汇总： 1.本地图片文件名称中包含中文：像上面图片，文件名称为中文，代码里面即使将文件路径设置正确同样真机不会显示图片。这个问题之前遇见过，不知道现在wx是否解决了这个问题。 2.本地图片文件名称中后缀大小写不统一：当本地图片的后缀名出现有大写、有小写时就要注意了，代码中写的文件路径为小写时，就会出现真机不显

【微信小程序】background-image设置背景图片不显示的解决办法

qq_45587822的博客

03-06

1万+

微信小程序：背景图不显示、下拉没有触发onPullDownRefresh

03-29

微信小程序里面是允许用户自定义背景图的，但是限定了背景图的路径及地址，之前一直用相对路径来写，微信开发者工具中也显示出了背景图，误以为没有问题，但是预览的时候发现手机中不显示背景图，这就是今天介绍的第...

微信小程序开发背景图显示功能

11-30

这两天开发微信小程序，在设置背景图片时，发现在wxss里面设置 background-image:(url) 属性，不管是开发工具还是线上都无法显示。经过查资料发现，background-image 只能用网络url或者base64图片编码，本地图片...

微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

10-16

本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...

微信小程序的背景无法充满屏幕

03-29

微信小程序的背景无法充满屏幕在升级后的客户端默认height值改变了，需要在.wxss文件的最前端加上以下程序 page{ height: 100%; } 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原...

新手前端微信小程序img图片无法显示问题

weixin_37342647的博客

02-28

2万+

最近自己在做毕设，是一个微信小程序，虽然自己有一点前端开发经验，以为小程序前端和这个差不多可以直接开撸，但是这两天被一些图片问题烦了好久。这也是自己第一次写博客，实在太生气了，网上也没找到自己想要的结果，所以写下来记录下来，顺便让和我一样错误的人知道咋解决，笑cry，虽然真的很低级的错误。以下是遇到的问题。 1：在开发者工具可以显示图片，手机预览，真机调试却看不到。 2：在最开始的ipho...

微信小程序的的图片显示不出来

信徒博客

05-23

2万+

图片的路径分两种 1、本地的图片如images文件夹下面的 /images/t1.jpg 或者是http://localhost:8080/Teacher/news/t1.jpg 2、网络连接的图片http://www.baidu.com/vue/news/t1.jpg 往往会出现加载不出来的问题？解决方案 1、注意是<image />不是<img...

解决微信小程序开发网络图片编译正常但真机测试不显示

qq_42197441的博客

06-03

1555

解决微信小程序开发网络图片编译正常但真机测试不显示 小程序对于网络图片进行本地临时存储，才能预览或者真机调试 var use_tx = wx.getStorageSync('userInfo').use_tx // 网络头像地址 wx.getImageInfo({ // 根据头像地址下载头像并存为临时路径 src: use_tx, success: res => { console.log(res) that.setData({ toxiang: r

关于微信小程序图片本地显示真机测试上不能显示的问题

weixin_37252943的博客

11-01

1万+

废话不多说直接入正题图片不能过大图片命名不能含有中文图片命名也不能有空格图片大小写要区分以接口或者链接形式的图片开头不能是大写的HTTP结尾也不能是.PNG 上面就是我在今天碰到问题时在网上搜到的普遍解决方法但如果问题还没解决，怎么办呢？你很可能遇到跟我一样的问题——rpx转换到px的微差。当我们用编辑器编写用于手机端的自适应单位用的自然是rpx，但是根据不同的手机屏幕大小...

微信小程序样式中的background-image使用本地图片不显示

yumihe

08-16

2万+

无论是微信小程序原生开发，还是使用第三方开发微信小程序框架mpvue 都会发现样式中的background-image使用本地图片后，src里的已经是base64格式的 background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABICAYAAAC+2ghEAAAAAXNSR0IArs4c6QA…… ...

微信小程序图片使用示例

祈澈菇凉

05-24

3395

小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1：加载本地文件夹图片 <image src="/image/pig.jpg" mode="aspectFill"> </image> ...

微信小程序之图片处理（居中、铺满屏幕）附源程序

热门推荐

Ticky的博客

07-18

15万+

图片显示是小程序设计必须要经过的步骤，本人看到网上教学有限，现整理出自己设计过程中出现的问题，应该可以解决你遇到的问题。用最后给的完整代码，按照我的步骤一定能调试出来，不行再联系我。先给用到的代码以及效果图：先给home.wxml程序： <view class='imagesize'> <image src="/images/2.png" class='in-...

微信小程序----相对路径图片不显示

止于至善

07-27

2万+

出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。出现图片不显示的原因 小程序只支持网络路径和base64的图片。图片转base64在线工具处理方法将图片都放到服务器，然后直接采用网络路径。 1.1 优点是能够放大量的图片。 1.2 缺点是有时开发中有大量的小图片，或者修改小图标，对于开发者来说，更换会很麻烦。将图片都转换成 ...

uni-app微信小程序背景图片无法显示

07-27

uni-app微信小程序背景图片无法显示的问题可能有多种原因。其中一种可能是图片路径不正确或图片文件不存在。请确保你在代码中正确设置了背景图片的路径，并且确认该路径下存在对应的图片文件。另外，还需要注意图片文件的格式是否被支持，以及是否有权限访问该图片文件。如果问题仍然存在，你可以尝试清除缓存或重新上传图片来解决该问题。 #### 引用[.reference_title] - *1* [uni-app微信小程序上传图片封装](https://blog.csdn.net/weixin_45947191/article/details/128023970)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【uni-app微信小程序】实现支付功能](https://blog.csdn.net/weixin_55846296/article/details/130822408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]