Bagaimana untuk memuatkan imej dinamik dari url dalam Nuxt3?

Question

Saya mempunyai komponen nuxt 3 yang tidak boleh memuatkan imej dinamik yang saya dapat daripada URL tertentu (imej auth0).

Templat saya kelihatan seperti ini:

<template>
     <img class="h-28 w-28 bulat-penuh sempadan-4 sempadan-hitam-kelabu-300"
     <p> {{{nama}} {{imej}} </p>
</template>

Skrip saya disediakan seperti berikut:

<setup script>
  import { useAuth0 } daripada '@auth0/auth0-vue';
  
  biarkan auth0 = process.client useAuth0() : undefined;
  biarkan nama = ref('');
  biarkan imej = ref('');

  //semak keadaan pengesahan pengguna dan tetapkan nama dan imej
  if(auth0?.isAuthenticated){
    name.value = auth0?.user.value.nickname; //url imej: https://....
    image.value = auth0?.user?.value.picture;
  }
</script>

Nama dan imej muncul dalam perenggan, tetapi url imej tidak wujud dalam atribut src, jadi imej tidak muncul. Apabila saya kembali dan menaip sesuatu dalam VSCode, imej itu sebenarnya dipaparkan. Sebarang idea bagaimana untuk membuat imej?

Answer 1

Ia harus ditakrifkan sebagai harta yang dikira kerana ia bergantung pada nilai harta lain (lakukan perkara yang sama untuk 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>