<p>Ich habe eine Nuxt 3-Komponente, die ein dynamisches Bild, das ich von einer bestimmten URL (auth0-Bild) erhalte, nicht laden kann. </p> <p>Meine Vorlage sieht so aus:</p> <pre class="brush:php;toolbar:false;"><template> <img class="h-28 w-28round-full border-black bg-gray-300" <p> {{{name}} {{image}} </p> </template></pre> <p>Mein Skript ist wie folgt aufgebaut:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>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? </p>

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