Nuxt3でURLから動的画像をロードするにはどうすればよいですか?
P粉236743689
P粉236743689 2023-08-30 10:17:55
0
1
599
<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>
P粉236743689
P粉236743689

全員に返信(1)
P粉704066087

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート