Wie lade ich dynamische Bilder von einer URL in Nuxt3?

Question

Ich habe eine Nuxt 3-Komponente, die ein dynamisches Bild, das ich von einer bestimmten URL (auth0-Bild) erhalte, nicht laden kann.

Meine Vorlage sieht so aus:

<template>
     <img class="h-28 w-28round-full border-black bg-gray-300"
     <p> {{{name}} {{image}} </p>
</template>

Mein Skript ist wie folgt aufgebaut:

<script setup>
  import { useAuth0 } from '@auth0/auth0-vue';
  
  let auth0 = process.client ? useAuth0() : undefiniert;
  let name = ref('');
  let image = ref('');

  //Überprüfen Sie den Benutzerauthentifizierungsstatus und legen Sie Namen und Bild fest
  if(auth0?.isAuthenticated){
    name.value = auth0?.user.value.nickname; //Bild-URL: https://....
    image.value = auth0?.user?.value.picture;
  }
</script>

Der Name und das Bild werden im Absatz angezeigt, aber die Bild-URL ist nicht im src-Attribut vorhanden, sodass das Bild nicht angezeigt wird. Wenn ich zurückgehe und etwas in VSCode eingebe, wird das Bild tatsächlich gerendert. Irgendeine Idee, wie man ein Bild rendert?

Answer 1

它应该被定义为计算属性，因为它取决于另一个属性的值（对 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>