解决微信小程序报错：[渲染层网络层错误] Failed to load local image resource_[渲染层网络层错误] failed to load local image resource /pa

一、场景

写了一个图片点击、全屏展示的组件。
页面图片 => 点击 => 打开全屏遮罩层显示大图片。

	// 1控制元素展示的变量
	data:{    	
		photoShow:false,
	}
	
	// 2图片点击函数
	onClick(){
    	const { url=null } = e.currentTarget.dataset;
	    if(url) this.setData({ photoShow: url })
	}
	
	// 3 图片html
    <image 
    	data-url="url......"
    	src="url......" 
    	bindtap="onClick"
    />
	
	// 4 全屏展示 遮罩层 html
    <van-overlay show="{{ photoShow }}" >
      <image src="{{ photoShow }}"/>
    </van-overlay>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行报错

二、分析原因

因为使用了三方ui组件库的遮罩层，通过 show,来控制隐藏和显示。
dom加载之初节点（van-overlay 及其内部的 image）标签就会被渲染，但是 image 的src并没有被赋值。
这就导致了微信开发者工具报错【渲染层网络层错误】

三、解决问题

思路 只需要保证 image 标签在【渲染】的时候，src 属性存在值就行了。

我是直接在 image 中加了个 wx:if="{{ photoShow }}"

  <van-overlay show="{{ photoShow }}" bind:click="closePhotos" z-index="3">
      <image 
      	wx:if="{{ photoShow }}" 
      	src="{{ photoShow }}" 
      />
 </van-overlay>
1
2
3
4
5
6