test / get assets file path

Author: totocalcio

packages/ui/components/namecard/Namecard24.vue

@@ -2,6 +2,7 @@
 import NamecardAvatar from './NamecardAvatar24.vue'
 import type { NamecardUser } from '@vuejs-jp/model'
 import { useUserRole } from '@vuejs-jp/composable'
+import { onMounted, ref } from 'vue'
 
 type NamecardProps = {
   user: NamecardUser
@@ -11,6 +12,10 @@ type NamecardProps = {
 defineProps<NamecardProps>()
 
 const { backgroundColor } = useUserRole()
+const sponsorImagePath = ref('')
+onMounted(() => {
+  sponsorImagePath.value = new URL('../../assets/namecard/support.svg', import.meta.url).href
+})
 </script>
 
 <template>
@@ -23,7 +28,7 @@ const { backgroundColor } = useUserRole()
       {{ user.role }}
     </div>
     <div class="namecard-sponsor">
-      <img src="../../assets/namecard/support.svg" alt="Supported by Stockmark" />
+      <img :src="sponsorImagePath" alt="Supported by Stockmark" />
     </div>
   </div>
 </template>

packages/ui/components/namecard/NamecardAvatar24.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import NamecardAvatarLogo from './NamecardAvatarLogo24.vue'
 import type { NamecardUser } from '@vuejs-jp/model'
+import { onMounted, ref } from 'vue'
 
 type NamecardAvatarProps = {
   user: NamecardUser
@@ -12,13 +13,17 @@ const COLOR_AVATAR_NAME = {
   DEFAULT: 'color-mix(in srgb, var(--color-vue-blue), #000 20%)',
   PLACEHOLDER: 'var(--color-gray100)',
 }
+const vuefesLogoImagePath = ref('')
+onMounted(() => {
+  vuefesLogoImagePath.value = new URL('../../assets/namecard/vuefes_logo.svg', import.meta.url).href
+})
 </script>
 
 <template>
   <div class="avatar">
     <span class="avatar-hook" aria-hidden="true" />
     <div class="vuefes-logo-wrapper">
-      <img src="../../assets/namecard/vuefes_logo.svg" alt="vuefes logo" />
+      <img :src="vuefesLogoImagePath" alt="vuefes logo" />
     </div>
     <div class="avatar-logo-wrapper">
       <NamecardAvatarLogo :user="user" />