Use imported images and URL helper

Replace hardcoded asset paths with bundler-friendly imports and a URL helper. Added getFlagUrl in LanguageSelector.vue to resolve flag assets via import.meta.url and replaced string-based src attributes. In Home.vue, import landingLq and landingHq and use them for initial and high-quality hero image loading to avoid direct '/src/...' paths and ensure proper asset resolution.
This commit is contained in:
Starystars67
2026-04-02 01:34:31 +01:00
parent c2e460b408
commit 44268d076d
2 changed files with 11 additions and 5 deletions

View File

@@ -37,6 +37,10 @@ const toggleDropdown = () => {
isOpen.value = !isOpen.value
}
const getFlagUrl = (flagName) => {
return new URL(`../assets/flags/${flagName}.png`, import.meta.url).href
}
onMounted(async () => {
const saved = localStorage.getItem('lang') || getCurrentLocale()
if (saved && saved !== locale.value) {
@@ -60,7 +64,7 @@ onMounted(async () => {
@click="toggleDropdown"
>
<img
:src="`/src/assets/flags/${currentLanguage().flag}.png`"
:src="getFlagUrl(currentLanguage().flag)"
:alt="currentLanguage().name"
class="w-5 h-4 rounded-sm"
/>
@@ -85,7 +89,7 @@ onMounted(async () => {
]"
@click="selectLanguage(code)"
>
<img :src="`/flags/${lang.flag}.png`" :alt="lang.name" class="w-5 h-4 rounded-sm" />
<img :src="getFlagUrl(lang.flag)" :alt="lang.name" class="w-5 h-4 rounded-sm" />
<span>{{ lang.name }}</span>
<span v-if="locale === code" class="ml-auto text-neutral-500"></span>
</button>

View File

@@ -14,6 +14,8 @@ import {
Rocket,
} from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
import landingLq from '@/assets/landing-lq.jpg'
import landingHq from '@/assets/landing_hq.png'
const { t } = useI18n()
const onlinePlayers = ref('...')
@@ -21,7 +23,7 @@ const onlineServers = ref('...')
const totalServers = ref('...')
const isLoading = ref(true)
const heroImageLoaded = ref(false)
const heroImageSrc = ref('/landing-lq.jpg')
const heroImageSrc = ref(landingLq)
onMounted(async () => {
try {
@@ -44,9 +46,9 @@ onMounted(async () => {
// Load high-quality hero image
const img = new Image()
img.src = '/src/assets/landing_hq.png'
img.src = landingHq
img.onload = () => {
heroImageSrc.value = '/src/assets/landing_hq.png'
heroImageSrc.value = landingHq
heroImageLoaded.value = true
}
})