Comment charger des images dynamiques à partir d'une URL dans Nuxt3 ?
P粉236743689
2023-08-30 10:17:55
<p>J'ai un composant nuxt 3 qui ne peut pas charger une image dynamique que j'obtiens à partir d'une URL spécifique (image auth0). </p>
<p>Mon modèle ressemble à ceci :</p>
<pre class="brush:php;toolbar:false;"><template>
<img class="h-28 w-28 bordure complète arrondie-4 bordure-noire bg-gris-300" :src="image" alt=" />
<p> {{{nom}} {{image}} </p>
</template></pre>
<p>Mon script est configuré comme suit :</p>
<pre class="brush:php;toolbar:false;"><configuration du script>
importer { useAuth0 } depuis '@auth0/auth0-vue' ;
let auth0 = process.client ? useAuth0() : non défini ;
laissez nom = ref('');
laissez image = ref('');
//vérifie l'état d'authentification de l'utilisateur et définit le nom et l'image
si(auth0?.isAuthenticated){
nom.value = auth0?.user.value.nickname; //url de l'image : https://....
image.value = auth0?.user?.value.picture;
}
</script></pre>
<p>Le nom et l'image apparaissent dans le paragraphe, mais l'url de l'image n'existe pas dans l'attribut src, donc l'image n'apparaît pas. Lorsque je reviens et tape quelque chose dans VSCode, l'image s'affiche réellement. Une idée sur comment rendre une image ? </p>
Elle doit être définie comme une propriété calculée car elle dépend de la valeur d'une autre propriété (faire de même pour
name
) :