渲染层网络层报错

644 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

问题描述

情况是这样的昨天在写小程序的时候,我进行图片进行循环出来,但是出现渲染层网络层报错,我以为是图片的地址出现了问题,经过打印是完全可以进行循环的。(如图下图)

e5650e3a7517329e217b83daa90647f.png c0ae66cce162656d513883ea5e53113.png 既然没有语法错误,为什么会报错呢?请看如下解决方案

解决方案

开发者社区修改报错的方法是
<image wx:if="{{item.image_src}}" src="{{item.image_src}}"></image>

在看到开发者社区后,好多是这样改了后, 认为是防盗链的原因,但是进行修改了后还是进行报错

调试版本库

因为异步请求需要一定的时间,而小程序一进页面就开始加载,请求速度没跟上,这时页面显示加载的时候image里面的值是空的,就会出现渲染层、网络层错误,所以既然是加载速度的原因,我们完全可以让其完全加载完成之后在显示,所以我们可以通过拖延加载时间的方法来解决这个bug。

在开发环境基本信息一部分中,我们已说明上述报错代码所依赖的调试基础库版本信息,这里我们不需要修改任何代码,只需要修改一下版本信息即可让代码跑通

240a4b93544e9fafa48ff501ef07a4b.png

总结

开发者工具调试器-console中的渲染错误 要注意,load image resource 有问题,排查思路,查图片路径是否有效

理解了前端 一个图层的无法加载,不影响这个页面其他的渲染。深刻理解了图层的概念