Nuxt3의 URL에서 동적 이미지를 로드하는 방법은 무엇입니까?

Question

특정 URL(auth0 이미지)에서 가져온 동적 이미지를 로드할 수 없는 nuxt 3 구성 요소가 있습니다.

내 템플릿은 다음과 같습니다:

<템플릿>
     <img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" :src="image" alt=" />
     <p> {{{이름}} {{이미지}} </p>
</템플릿>

내 스크립트는 다음과 같이 설정되었습니다.

<스크립트 설정>
  '@auth0/auth0-vue'에서 { useAuth0 }을 가져옵니다.
  
  auth0 = process.client ? useAuth0() : 정의되지 않음;
  이름 = ref('');
  이미지 = ref('');

  //사용자 인증 상태를 확인하고 이름과 이미지를 설정합니다.
  if(auth0?.isAuthenticated){
    name.value = auth0?.user.value.nickname; //이미지 URL: https://....
    image.value = auth0?.user?.value.picture;
  }

문단에 이름과 이미지가 나오는데, src 속성에 이미지 URL이 없어 이미지가 나오지 않습니다. 돌아가서 VSCode에 무언가를 입력하면 이미지가 실제로 렌더링됩니다. 이미지를 렌더링하는 방법을 아시나요? 
            

Answer 1

다른 속성의 값에 따라 달라지므로 계산된 속성으로 정의해야 합니다(name에 대해서도 동일하게 수행).

으아악