vue.js 如何在Nuxt3中从URL加载动态图像?

k4ymrczo  于 2023-05-01  发布在  Vue.js
关注(0)|答案(1)|浏览(340)

我有一个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中键入一些内容后,图像实际上会呈现。有什么想法我可以使图像渲染?

h22fl7wq

h22fl7wq1#

它应该被定义为一个计算属性,因为它依赖于另一个属性的值(对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>

相关问题