Nuxt3でURLから動的画像をロードするにはどうすればよいですか?

Question

特定の URL (auth0 画像) から取得した動的画像をロードできない nuxt 3 コンポーネントがあります。

私のテンプレートは次のようになります:

<テンプレート>
     <img class="h-28 w-28rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " />
     <p> {{{名前}} {{画像}} </p>
</template>

私のスクリプトは次のように設定されています:

<スクリプトのセットアップ>
  import { useAuth0 } から '@auth0/auth0-vue';
  
  let auth0 = process.client ? useAuth0() : 未定義;
  名前 = ref(''); とします。
  画像 = ref(''); とします。

  // ユーザーの認証状態を確認し、名前と画像を設定します
  if(auth0?.isAuthenticated){
    name.value = auth0?.user.value.nickname; //画像URL: https://....
    image.value = auth0?.user?.value.picture;
  }
</script>

名前と画像は段落に表示されますが、src 属性に画像の URL が存在しないため、画像は表示されません。戻って VSCode に何かを入力すると、画像が実際にレンダリングされます。画像をレンダリングする方法はありますか?

Answer 1

これは別のプロパティの値に依存するため、計算プロパティとして定義する必要があります (name についても同じことを行います):

リーリー