Nuxt3でURLから動的画像をロードするにはどうすればよいですか?
P粉236743689
2023-08-30 10:17:55
<p>特定の URL (auth0 画像) から取得した動的画像をロードできない nuxt 3 コンポーネントがあります。 </p>
<p>私のテンプレートは次のようになります:</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<img class="h-28 w-28rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " />
<p> {{{名前}} {{画像}} </p>
</template></pre>
<p>私のスクリプトは次のように設定されています:</p>
<pre class="brush:php;toolbar:false;"><スクリプトのセットアップ>
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></pre>
<p>名前と画像は段落に表示されますが、src 属性に画像の URL が存在しないため、画像は表示されません。戻って VSCode に何かを入力すると、画像が実際にレンダリングされます。画像をレンダリングする方法はありますか? </p>
これは別のプロパティの値に依存するため、計算プロパティとして定義する必要があります (
リーリーname
についても同じことを行います):