<p>我有一个 nuxt 3 组件，无法加载我从特定 URL（auth0 图像）获取的动态图像。</p> <p>我的模板如下所示：</p> <pre class="brush:php;toolbar:false;"><template> <img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " /> <p> {{{name}} {{image}} </p> </template></pre> <p>我的脚本设置如下：</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>名称和图像显示在段落中，但图像 url 不存在于 src 属性中，因此图像不显示。当我返回并在 VSCode 中输入一些内容后，图像实际上会呈现。知道如何渲染图像吗？</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>