{{{name">
특정 URL(auth0 이미지)에서 가져온 동적 이미지를 로드할 수 없는 nuxt 3 구성 요소가 있습니다.
내 템플릿은 다음과 같습니다:
<템플릿><스크립트 설정> '@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에 무언가를 입력하면 이미지가 실제로 렌더링됩니다. 이미지를 렌더링하는 방법을 아시나요?
다른 속성의 값에 따라 달라지므로 계산된 속성으로 정의해야 합니다(
으아악name
에 대해서도 동일하게 수행).