From 57d1d204670c47cfadf316a42644aba6be42e4a1 Mon Sep 17 00:00:00 2001
From: jezzahehn <jezza.hehn@wikitribune.com>
Date: Sat, 24 May 2025 22:21:38 -0400
Subject: [PATCH] fix: updating image file format to proper Vite style

---
 src/locales/en_US.ts |  4 ++--
 src/routes/index.vue | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index 8619415..02c11b6 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -3,13 +3,13 @@ export default {
     {
       "title": "What is Viossa?",
       "text": "Viossa is a community-created artificial pidgin language, created to simulate the formation of natural pidgin languages. Viossa is characterized by its lack of standardization, with each speaker developing a personal idiolect. Spelling and pronunciation can vary greatly, and serve as a form of personal self-expression. Viossa is learnt and taught entirely by immersion — translation is prohibited while learning.",
-      "image": "/src/assets/flakka.png",
+      "image": "flakka.png",
       "alt": "Flag of the Viossa Language"
     },
     {
       "title": "History of Viossa",
       "text": "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
-      "image": "/src/assets/flakka.png",
+      "image": "flakka.png",
       "alt": "Flag of the Viossa Language"
     },
     {
diff --git a/src/routes/index.vue b/src/routes/index.vue
index ce79d6a..8d7c2c8 100644
--- a/src/routes/index.vue
+++ b/src/routes/index.vue
@@ -7,7 +7,7 @@
 
     <section class="section">
       <HomeSectionWrapper 
-        v-for="(section, index) in sectionList" 
+        v-for="(section, index) in sectionsWithImages" 
         :key="index"
         :title="section.title"
         :text="section.text"
@@ -29,6 +29,16 @@ import { computed } from 'vue'
 
 const { tm } = useI18n()
 const sectionList = computed<MessageSchema['sections']>(() => tm('sections'))
+const sectionsWithImages = computed(() =>
+  sectionList.value.map(section => {
+    if (!section.image) return section
+
+    return {
+      ...section,
+      image: new URL(`../assets/${section.image}`, import.meta.url).href
+    }
+  })
+)
 
 console.log(sectionList.value)
 </script>