Processing: uniapp develops WeChat applet [rendering layer network layer error] Failed to load local image resource /pages/index/undefined

need

I want to achieve the effect of a dynamic combination of an avatar and a photo frame.
Open my page, and after dynamically obtaining user information, render the avatar and border.

encounter

It is normal to directly give the image address (constant) in the test, but it is wrong to change it to a variable.

Error:

[渲染层网络层错误] Failed to load local image resource /pages/my/undefined 
 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 
(env: Windows,mp,1.06.2306020; lib: 2.33.0)

analyze

1. HBuilderXThere is no error in the middle, which proves that the grammar is not. To 微信开发者工具indicate that it is a runtime problem. (The premise is that I believe that there is no bug in HBuilderX to applet)
2. Most of the online inquiries are页面初次加载时，图片还没加载出来，用 Computed 解决。
3. The error message /pages/index/undefined here undefined is the key, indicating that something is not initialized. But this is not my picture address, so I was a little confused for a while. (It was verified later that this actually contained two errors)
   • The variable is not declared, so you will seeundefined
   • srcI only got one undefined, so I understood it as a relative path, so I looked for it from the current page path: /pages/my/undefined.
   • The picture could not be found, so it failed to load the picture again.

in conclusion

I'm having this problem Compute()unrelated to . The most fundamental reason is that no default value is given.
As a result, onLoadthe image could not be found when rendering before, so an error was reported. ( onLoadYou can see it when you hit a breakpoint, and you have already reported an error before you come in)

problem code

<template>
	<view class="avatar" :style="{ backgroundImage: avatarBg }">
		<image :src="userInfo.avatar"/>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      }
		},
		// 初始化加载用户信息
		onLoad(obj) {
      
      
			this.userInfo = {
      
      
				// 测试本地图片
				avatar: '/static/logo.png',
				// 测试网络图片
				avatarBg: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg'
			}
		},
		computed: {
      
      
			avatarBg() {
      
      
				return `url(${ 
        this.userInfo.avatarBg})`;
			}
		},
	}
</script>

Code after fix

<template>
	<view class="avatar" :style="{ backgroundImage: `url(${userInfo.avatarBg})` }">
		<image :src="userInfo.avatar"/>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				// 初始化时空字符串，就不会去请求。否则乱给个名字，加载不到还是报错。
				userInfo:{
      
       avatar: '', avatarBg: '' }
			}
		},
		// 初始化加载用户信息
		onLoad(obj) {
      
      
			this.userInfo = {
      
      
				avatar: '/static/logo.png',
				avatarBg: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg'
			}
		}
	}
</script>

In fact, it userInfoprovides an initial value for . computedIt is not used at all, so it is removed directly.