Comment charger des images dynamiques à partir d’une URL dans Nuxt3 ?

Question

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

Mon modèle ressemble à ceci :

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

Mon script est configuré comme suit :

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

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 ?

Answer 1

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

<script setup>

  import { useAuth0 } from '@auth0/auth0-vue';
  
  let auth0 = process.client ? useAuth0() : undefined;

  const name = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.nickname:'');
  const image = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.picture:'');


</script>