diff --git a/src/components/PeopleItem.vue b/src/components/PeopleItem.vue
index 6dd289e..5e7d59f 100644
--- a/src/components/PeopleItem.vue
+++ b/src/components/PeopleItem.vue
@@ -7,7 +7,7 @@ const props = defineProps({
 <template>
   <div class="column col-xs-12 col-md-3 q-pa-sm">
     <div class="q-card--bordered rounded-borders text-center bg-primary text-white col-grow">
-      <q-img :src="props.people.image" alt="" class="rounded-borders" style="max-width: 100%; height: auto"/>
+      <q-img :src="new URL(props.people.image, import.meta.url).href" alt="" class="rounded-borders" style="max-width: 100%; height: auto"/>
       <div class="q-py-sm">
         <div class="text-h6">{{ props.people.name }}</div>
         <div class="text-subtitle2">{{ props.people.affiliation }}</div>
diff --git a/src/components/PeopleItemLarge.vue b/src/components/PeopleItemLarge.vue
index a7cb6f4..59ed834 100644
--- a/src/components/PeopleItemLarge.vue
+++ b/src/components/PeopleItemLarge.vue
@@ -8,8 +8,8 @@ const props = defineProps({
   <div class="column col-xs-12 col-md-6 q-pa-sm">
   <div class="row q-card--bordered rounded-borders text-center bg-primary text-white">
       <div class="col-xs-12 col-md-6 row items-center">
-        <img :src="props.people.image" alt="" class="rounded-borders" style="max-width: 50%; height: auto">
-        <q-img :src="props.people.image" alt="" class="rounded-borders" style="max-width: 50%; height: auto"/>
+        <img :src="new URL(props.people.image, import.meta.url).href" alt="" class="rounded-borders" style="max-width: 50%; height: auto">
+        <q-img :src="new URL(props.people.image, import.meta.url).href" alt="" class="rounded-borders" style="max-width: 50%; height: auto"/>
       </div>
       <div class="col-xs-12 col-md-6 q-py-md justify-evenly column">
         <div>
diff --git a/src/data/people.js b/src/data/people.js
index bd2be3a..861f881 100644
--- a/src/data/people.js
+++ b/src/data/people.js
@@ -1,7 +1,7 @@
 const people = {
   chonLokLei: {
     name: 'Chon Lok Lei',
-    image: new URL('~assets/chonLokLei.png', import.meta.url).href,
+    image: '~assets/chonLokLei.png',
     affiliation: 'PhD, Macau',
     description: 'Chon Lok Lei is an Assistant Professor in the Faculty of Health Sciences at the University of Macau. He holds a doctorate in Computational Biology from the University of Oxford, where he was a Clarendon Scholar.',
     page: true,
@@ -10,7 +10,7 @@ const people = {
   phdStudents: [
     {
       name: 'Richard Creswell',
-      image: new URL('~public/maleAvatar.png', import.meta.url).href,
+      image: '~public/maleAvatar.png',
       affiliation: 'PhD student, Oxford',
       description: 'Working with Ben Lambert and David Gavaghan in Oxford on developing Bayesian methods for time series problems with applications including epidemiology.',
       page: false,
@@ -18,7 +18,7 @@ const people = {
     },
     {
       name: 'Joseph Shuttleworth',
-      image: new URL('public/maleAvatar.png', import.meta.url).href,
+      image: 'public/maleAvatar.png',
       affiliation: 'PhD student, Nottingham',
       description: 'Working with Gary Mirams and Simon Preston in Nottingham on optimising experiments for building ion channel models.',
       page: false,
@@ -26,7 +26,7 @@ const people = {
     },
     {
       name: 'Hui Jia Farm',
-      image: new URL('/public/maleAvatar.png', import.meta.url).href,
+      image: '/public/maleAvatar.png',
       affiliation: 'PhD student, Oxford',
       description: 'Working with Michael Clerx in Nottingham, Fergus Cooper, David Gavaghan in Oxford, and Hoffmann-La Roche Safety Pharmacology group in Basel, Switzerland to examine drug binding effects to ion channels.',
       page: false,
@@ -36,7 +36,7 @@ const people = {
   currentResearchAssistants: [
     {
       name: 'Leandro Acosta',
-      image: new URL('~maleAvatar.png', import.meta.url).href,
+      image: '~maleAvatar.png',
       affiliation: 'RA, Macau',
       description: 'Developing the front end of virtual patch clamp.',
       page: false,