mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-04-02 22:06:08 +00:00
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:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user