我有一个nuxt 3组件,它无法加载我从特定URL(auth0 images)获取的动态图像。
我的模板看起来是这样的:
<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中键入一些内容后,图像实际上会呈现。有什么想法我可以使图像渲染?
1条答案
按热度按时间h22fl7wq1#
它应该被定义为一个计算属性,因为它依赖于另一个属性的值(对
name
做同样的事情):