処理: uniapp が WeChat アプレットを開発 [レンダリング層ネットワーク層エラー] ローカル画像リソース /pages/index/unknown のロードに失敗しました

必要

アバターとフォトフレームをダイナミックに組み合わせた効果を実現したいと考えています。
マイページを開き、ユーザー情報を動的に取得した後、アバターと枠線をレンダリングします。

出会い

テストでは画像アドレス（定数）を直接与えるのが普通ですが、変数に変えるのは間違いです。

エラー：

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

分析する

1. HBuilderX途中に間違いはありません。これは文法が間違っていることを証明しています。「説明へ」は微信开发者工具実行時の問題です。(前提として、HBuilderX にはアプレットにバグはないと考えています)
2. ネットでのお問い合わせのほとんどは、页面初次加载时，图片还没加载出来，用 Computed 解决。
3. /pages/index/undefined ここでのエラー メッセージはundefined キーであり、何かが初期化されていないことを示しています。しかし、これは私の写真アドレスではないので、しばらく少し混乱しました。(後で、これには実際には 2 つのエラーが含まれていることが確認されました)
   • 変数は宣言されていないため、次のようになります。undefined
   • srcは 1 つしか取得できなかったundefinedので、相対パスとして理解したので、現在のページのパスから探しました/pages/my/undefined。
   • 画像が見つからなかったため、画像の再読み込みに失敗しました。

結論は

とは関係なくこの問題が発生していますCompute()。最も根本的な理由は、デフォルト値が指定されていないことです。
その結果、onLoad以前のレンダリング時に画像が見つからず、エラーが報告されました。(onLoadブレークポイントに到達したときに確認できます。ブレークポイントに入る前にすでにエラーが報告されています)

問題コード

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

修正後のコード

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

実際、これはuserInfoの初期値を提供します。computed全く使用しないのでそのまま取り外します。