Procesamiento: uniapp desarrolla el subprograma WeChat [error de capa de red de capa de renderizado] No se pudo cargar el recurso de imagen local /pages/index/undefinido

necesidad

Quiero lograr el efecto de una combinación dinámica de un avatar y un marco de fotos.
Abra mi página y, después de obtener dinámicamente la información del usuario, renderice el avatar y el borde.

encontrar

Es normal dar directamente la dirección de la imagen (constante) en la prueba, pero es incorrecto cambiarla a una 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)

analizar

1. HBuilderXNo hay ningún error en el medio, lo que demuestra que la gramática no lo es. La 微信开发者工具descripción es un problema de tiempo de ejecución. (La premisa es que creo que no hay ningún error en HBuilderX para el subprograma)
2. La mayoría de las consultas en línea son页面初次加载时，图片还没加载出来，用 Computed 解决。
3. El mensaje de error /pages/index/undefined aquí undefined es la clave, lo que indica que algo no está inicializado. Pero esta no es mi dirección fotográfica, así que estuve un poco confundido por un tiempo. (Más tarde se verificó que esto en realidad contenía dos errores)
   • La variable no está declarada, así que verásundefined
   • srcSolo obtuve uno undefined, así que lo entendí como una ruta relativa, así que lo busqué en la ruta de la página actual /pages/my/undefined:.
   • No se pudo encontrar la imagen, por lo que no se pudo cargar la imagen nuevamente.

en conclusión

Tengo este problema Compute()no relacionado con . La razón más fundamental es que no se proporciona ningún valor predeterminado.
Como resultado, onLoadno se pudo encontrar la imagen al renderizarla antes, por lo que se informó un error. ( onLoadPuede verlo cuando llega a un punto de interrupción y ya informó un error antes de ingresar)

código de problema

<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>

Código después de la corrección

<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>

De hecho, userInfoproporciona un valor inicial para . computedNo se utiliza en absoluto, por lo que se elimina directamente.