BeamMP/BeamMP-Website
1
0
Fork 0
mirror of https://github.com/BeamMP/BeamMP-Website.git synced 2026-10-12 03:24:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use imported images and URL helper

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LanguageSelector.vue
+6 -2
View File
@@ -37,6 +37,10 @@ const toggleDropdown = () => {
isOpen.value = !isOpen.value isOpen.value = !isOpen.value
} }
const getFlagUrl = (flagName) => {
return new URL(`../assets/flags/${flagName}.png`, import.meta.url).href
}
onMounted(async () => { onMounted(async () => {
const saved = localStorage.getItem('lang') || getCurrentLocale() const saved = localStorage.getItem('lang') || getCurrentLocale()
if (saved && saved !== locale.value) { if (saved && saved !== locale.value) {
@@ -60,7 +64,7 @@ onMounted(async () => {
@click="toggleDropdown" @click="toggleDropdown"
> >
<img <img
:src="`/src/assets/flags/${currentLanguage().flag}.png`" :src="getFlagUrl(currentLanguage().flag)"
:alt="currentLanguage().name" :alt="currentLanguage().name"
class="w-5 h-4 rounded-sm" class="w-5 h-4 rounded-sm"
/> />
@@ -85,7 +89,7 @@ onMounted(async () => {
]" ]"
@click="selectLanguage(code)" @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>{{ lang.name }}</span>
<span v-if="locale === code" class="ml-auto text-neutral-500">✓</span> <span v-if="locale === code" class="ml-auto text-neutral-500">✓</span>
</button> </button>
src/views/Home.vue
+5 -3
View File
@@ -14,6 +14,8 @@ import {
Rocket, Rocket,
} from 'lucide-vue-next' } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import landingLq from '@/assets/landing-lq.jpg'
import landingHq from '@/assets/landing_hq.png'
const { t } = useI18n() const { t } = useI18n()
const onlinePlayers = ref('...') const onlinePlayers = ref('...')
@@ -21,7 +23,7 @@ const onlineServers = ref('...')
const totalServers = ref('...') const totalServers = ref('...')
const isLoading = ref(true) const isLoading = ref(true)
const heroImageLoaded = ref(false) const heroImageLoaded = ref(false)
const heroImageSrc = ref('/landing-lq.jpg') const heroImageSrc = ref(landingLq)
onMounted(async () => { onMounted(async () => {
try { try {
@@ -44,9 +46,9 @@ onMounted(async () => {
// Load high-quality hero image // Load high-quality hero image
const img = new Image() const img = new Image()
img.src = '/src/assets/landing_hq.png' img.src = landingHq
img.onload = () => { img.onload = () => {
heroImageSrc.value = '/src/assets/landing_hq.png' heroImageSrc.value = landingHq
heroImageLoaded.value = true heroImageLoaded.value = true
} }
}) })