微信小程序在使用background-image设置背景图时报错：渲染层网络层错误

最新推荐文章于 2024-08-03 18:51:52 发布
最新推荐文章于 2024-08-03 18:51:52 发布
阅读量1.6k 收藏 1
点赞数 5
分类专栏： 微信小程序 bug收集 文章标签： 微信小程序 javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangqi20170515/article/details/127392243
版权
本文介绍了在微信小程序的wxss文件中，如何处理本地资源图片无法直接引用的问题。提供了四种解决方案：1) 图片转为base64格式；2) 使用网络图片URL；3) 写成内联样式；4) 通过image标签实现背景图效果。详细解析了每种方法的实现方式和代码示例。
摘要由CSDN通过智能技术生成

在这里插入图片描述

  • pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。

解决办法：

1、 转为base64格式使用

base64格式转换网址： base64格式转换网址

.wxss文件中


.xxxx{
background-image:url("")

在这里插入图片描述

2、使用图片的网络地址
.wxss文件中


.xxxx{
background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F11%2F20161211094511_HWVue.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668675961&t=275e5af9a4e86325ce263a6e6aa8da9c")
3、写成内联样式
  <view  style="background-image: url('/images/user/bf.jpg')"></view>
4、通过image标签

<image src="/images/user/bf.jpg"></image>
<view class="content">~hello~world~</view>

将image标签通过定位实现背景图的效果

学习前端的渣渣
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序 图片出错、加载失败处理（image组件的binderror事件处理）
weixin_44540005的博客
05-12 7236
先说下思路：这种处理 都是修改 原有的 出错数组图片路径对应的值 ，将其改为正确的图片路径。（小程序类似这样的改错，都是这个思路） 正题： 官网的image组件我就不详细说了，官网binderror错误事件处理并没有详细的说明，如果在获取网络图片出现404 nofound的情况下要怎样处理呢？ 有单张图片的处理、和多张（数组）图片的处理 写法大同小异 以前html的写...
微信小程序 background-image 报错
_NIXIAKF的博客
06-16 1052
开发过程中使用background设置背景图片在小程序上运行报错如下 报错原因：微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片。 解决：1.图片放到服务器上 使用线上图片 2. base64图片设置步骤如下： 2-1 在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2-2 在WXSS中使用以上文本： background-image:url(“data:image/png;b.
uniapp开发微信小程序报错【本地资源图片无法通过 WXSS 获取】
qq_44741577的博客
06-21 579
先看uniapp官网对背景图片的说明。
微信小程序设置background-image报错
undefined_404的博客
12-24 701
微信小程序设置 background-img 报错 微信小程序设置背景图片是会报错 提示必须使用网络资源或者 base64 解决办法1 把图片转换为base64格式 （base64图片转换） 把右边生成的base64编码放到url中就可以 ...
微信小程序之解决background-image属性失效
qq_42109746的博客
03-31 1万+
在做微信小程序时，当遇到需要给某个组件加背景图片时，通常是使用 background-image 这个属性。在以往的网页程序中，直接在这个属性后面加上相对路径或绝对路径，便可以将背景图片显示出来。但是，在微信小程序中却不可以，如果直接设置相对路径或者绝对路径，那么在微信开发者工具中的模拟器确实可以显示出来，但是一到了真机进行调试，却会发现这个属性失效了。目前有两种解决办法： 第一种：将图片路径设...
微信小程序报错：[渲染层网络层错误] pages/main/main.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用＜image/＞标签--解决办法
qq_44934339的博客
02-14 4582
项目场景： 项目场景：当向微信小程序中插入图片时报错，显示本地资源图片无法通过 WXSS 获取 报错如下： 问题描述： 项目中代码描述： .content{ font-family: 微软雅黑，宋体; font-size: 14px; /* background-size: cover; */ height: 100%; width: 100%; background-image: url("../assets/img/1.png"); color: #FFFFFF; }
uniapp开发微信小程序报错渲染层网络层错误
weixin_54245506的博客
04-19 533
报错：Failed to load local image resource /pages/scheduleWeb/undefined。在定义meetingInfo的时候以前直接定义的空对象，现在改为空对象里把bachgroundUrl也初始化一下，如下图。这个报错找了好久找不到，最后选择挨个注释页面的代码来排查，最后发现是这行代码报的错。
微信小程序-自定义组件-遮罩层
05-05
在此，我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 首先，我们需要了解微信小程序的组件体系。微信小程序的组件系统基于WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheet），这两种...
微信小程序使用swiper组件实现层叠轮播图
10-17
本文主要介绍如何在微信小程序中使用swiper组件来实现层叠轮播图效果，这可以有效吸引用户的注意力，并提升用户体验。 首先，我们需要了解Swiper组件的基本概念。Swiper是一个强大的、灵活的滑动视图容器，通常用于...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序期末大作业-手机商城微信小程序
12-15
微信小程序期末大作业-手机商城微信小程序（免积分下载） 含底部导航，轮播图等等，小程序运行截图请看我的文章介绍：https://blog.csdn.net/weixin_43474701/article/details/135025795
处理：uniapp开发微信小程序 [渲染层网络层错误] Failed to load local image resource /pages/index/undefined
灵台方寸山斜月三星洞
07-19 1万+
/ 初始化时空字符串，就不会去请求。// 初始化时空字符串，就不会去请求。测试中直接给图片地址（常量）正常，换成变量就出问题。打开我的页面，动态获取用户信息后，渲染头像及边框。我想实一个头像和相框的动态组合的效果。最根本就是没有初始给默认值。根本用不上，直接去掉了。// 初始化加载用户信息。// 初始化加载用户信息。
小程序背景图片无法通过 WXSS 获取
最新发布
m0_61368323的博客
08-03 701
将图片转换为base64，地址。可以使用网络图片，或者。
微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
qq_37160082的博客
09-02 3472
将绝对地址转换为base64编码的地址放在background-image:url('----');中即可 https://blog.csdn.net/zmzwll1314/article/details/84976233
微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法
热门推荐
qq_45829293的博客
05-25 50万+
1、报错原由 微信小程序使用background-image运行时报错 pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。 小程序样式中不允许小程序路径 2、解决方法 1. 使用图片的网络路径 background:url('http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg'); 2. base64 将图
微信小程序background-image不能直接指定本地图片
weixin_34082789的博客
10-24 6016
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序「渲染层网络层错误」解决方法
枫落曳
04-25 4428
解决方案：利用bindload判断图片加载完毕，修改状态显示图片 wxml： <view wx:for="{{flash}}"> <image src="{{item.loadReady ? item.img : '默认图'}}" bindload="imageLoadReady" data-index="{{index}}" data-key="flash"></image> </view> js： //图片加载 imageLoadRea
微信小程序|图片加载和布局 解决渲染层网络层错误
qq_51314244的博客
07-20 653
项目：计时器 效果：优化图片布局，减少渲染层网络层错误的问题；点击图片变色 参考：b站番茄时钟项目 WXML： <!-- 利用rpx布局行列，栈道读取图片名称 --> <view class="task_cate"> <view wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate" data-index="{{..
微信小程序中的background-image
05-10
微信小程序中可以使用 `background-image` 属性来设置元素的背景图片。具体使用方法如下： 1. 在 `.wxss` 文件中定义样式，例如： ```css .container { background-image: url('image/bg.jpg'); background-size: cover; background-position: center center; } ``` 2. 在对应的 `.wxml` 文件中使用定义好的样式，例如： ```html <view class="container"> <!-- 此处为容器内的内容 --> </view> ``` 这样就可以将 `image/bg.jpg` 作为 `.container` 元素的背景图片，并设置图片的显示方式和位置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值