Merge pull request #390 from vuejs-jp/fix/add-baseurl

Fix/add baseurl

Author: genj11

Diff for: apps/web/app/components/event/EventAsset.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Event } from '@vuejs-jp/model'
+import { useWithBase } from '#imports'
 
 interface EventAssetProps {
   title: Extract<
@@ -10,11 +11,12 @@ interface EventAssetProps {
 }
 
 const props = defineProps<EventAssetProps>()
+const withBase = useWithBase()
 </script>
 
 <template>
   <NuxtImg
-    :src="`/event/${title}.png`"
+    :src="withBase(`/event/${title}.png`)"
     alt=""
     class="eventcard-image"
     :style="{ marginTop: `${marginTop}px` }"

Diff for: apps/web/app/components/ticket/NamecardSection.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { endedApplyNormal, endedCreateNamecard, ticketUrl } from '~/utils/constants'
+import { useWithBase } from '#imports'
 
 const { locale: currentLocale } = useLocaleCurrent()
+const basePath = useWithBase()
 </script>
 
 <template>
@@ -25,7 +27,7 @@ const { locale: currentLocale } = useLocaleCurrent()
 
     <div class="content-wrapper">
       <NuxtImg
-        :src="'/namecard/namecard-samples.png'"
+        :src="basePath('/namecard/namecard-samples.png')"
         alt="test"
         width="596"
         loading="lazy"

Diff for: apps/web/app/components/ticket/PersonalSponsorSection.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { endedApplyNormal, ticketUrl } from '~/utils/constants'
+import { useWithBase } from '#imports'
+const withBase = useWithBase()
 </script>
 
 <template>
@@ -16,7 +18,7 @@ import { endedApplyNormal, ticketUrl } from '~/utils/constants'
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
         :caution="i === 2 || i === 4 ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" class="image" />
+        <NuxtImg alt="" :src="withBase(`/sponsor/merit-${i}.jpg`)" loading="lazy" class="image" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">

Diff for: apps/web/app/components/ticket/TicketSection.vue

@@ -8,22 +8,22 @@ const withBase = useWithBase()
 const ticketCards = {
   ippan: {
     title: t('ticket.card.ippan.title'),
-    imgSrc: '/ticket/ippan.png',
+    imgSrc: withBase('/ticket/ippan.png'),
     imgAlt: t('ticket.card.ippan.imgAlt'),
   },
   ippanParty: {
     title: t('ticket.card.ippanParty.title'),
-    imgSrc: '/ticket/ippan-party.png',
+    imgSrc: withBase('/ticket/ippan-party.png'),
     imgAlt: t('ticket.card.ippanParty.imgAlt'),
   },
   handsOn: {
     title: t('ticket.card.handsOn.title'),
-    imgSrc: '/ticket/hands-on.png',
+    imgSrc: withBase('/ticket/hands-on.png'),
     imgAlt: t('ticket.card.handsOn.imgAlt'),
   },
   individualSponsor: {
     title: t('ticket.card.individualSponsor.title'),
-    imgSrc: '/ticket/individual-sponsor.png',
+    imgSrc: withBase('/ticket/individual-sponsor.png'),
     imgAlt: t('ticket.card.individualSponsor.imgAlt'),
   },
 }
@@ -58,7 +58,7 @@ const ticketCards = {
       <div class="ticket-cards-container">
         <VFTicketCard
           :title="ticketCards.ippan.title"
-          :img-src="withBase(ticketCards.ippan.imgSrc)"
+          :img-src="ticketCards.ippan.imgSrc"
           :img-alt="ticketCards.ippan.imgAlt"
           :is-close="endedApplyNormal"
         >