Processamento: uniapp desenvolve miniaplicativo WeChat [erro de camada de rede da camada de renderização] Falha ao carregar recurso de imagem local /pages/index/undefined

precisar

Quero obter o efeito de uma combinação dinâmica de avatar e moldura de foto.
Abra minha página e após obter dinamicamente as informações do usuário, renderize o avatar e a borda.

encontro

É normal fornecer diretamente o endereço da imagem (constante) no teste, mas é errado alterá-lo para uma variável.

Erro:

[渲染层网络层错误] 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)

analisar

1. HBuilderXNão há erro no meio, o que prova que a gramática não existe. A 微信开发者工具descrição é um problema de tempo de execução. (A premissa é que acredito que não há bug no HBuilderX para miniaplicativo)
2. A maioria das consultas on-line são页面初次加载时，图片还没加载出来，用 Computed 解决。
3. A mensagem de erro /pages/index/undefined aqui undefined é a chave, indicando que algo não foi inicializado. Mas este não é o endereço da minha foto, então fiquei um pouco confuso por um tempo. (Foi verificado mais tarde que na verdade continha dois erros)
   • A variável não está declarada, então você veráundefined
   • srcEu só consegui um undefined, então entendi como um caminho relativo, então procurei no caminho da página atual: /pages/my/undefined.
   • A imagem não foi encontrada, por isso não foi possível carregá-la novamente.

para concluir

Estou tendo esse problema Compute()não relacionado ao . A razão mais fundamental é que nenhum valor padrão é fornecido.
Como resultado, onLoada imagem não pôde ser encontrada durante a renderização anterior, então um erro foi relatado. ( onLoadVocê pode ver isso quando atinge um ponto de interrupção e já relatou um erro antes de entrar)

código do 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 após correção

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

Na verdade, ele userInfofornece um valor inicial para . computedEle não é usado, então é removido diretamente.