如何在 Nuxt3 中從 url 載入動態影像？

Question

我有一個 nuxt 3 元件，無法載入我從特定 URL（auth0 映像）取得的動態圖片。

我的範本如下所示：

<template>
     <img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " />
     <p> {{{name}} {{image}} </p>
</template>

我的腳本設定如下：

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

  //check user authentication state and set name and image
  if(auth0?.isAuthenticated){
    name.value = auth0?.user.value.nickname; //image url : https://....
    image.value = auth0?.user?.value.picture;
  }
</script>

名稱和圖像顯示在段落中，但圖像 url 不存在於 src 屬性中，因此圖像不會顯示。當我返回並在 VSCode 中輸入一些內容後，圖像實際上會呈現。知道如何渲染圖像嗎？

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>