From c0c95e226d49f62aac84b8654cd3b3380b17703e Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Sat, 10 Sep 2022 17:36:01 +0300
Subject: [PATCH] Public image path changes

---
 layouts/AppConfigurator.vue                   | 80 +++++++++---------
 layouts/AppMenu.vue                           |  2 +-
 layouts/AppTopBar.vue                         | 82 +++++++++----------
 pages/autocomplete/AutoCompleteDoc.vue        |  2 +-
 pages/avatar/index.vue                        | 18 ++--
 pages/card/CardDoc.vue                        |  2 +-
 pages/card/index.vue                          |  2 +-
 pages/carousel/CarouselDoc.vue                |  2 +-
 pages/carousel/index.vue                      |  6 +-
 pages/chip/index.vue                          | 12 +--
 pages/colorpicker/index.vue                   |  2 +-
 pages/contextmenu/ContextMenuDoc.vue          |  2 +-
 pages/contextmenu/index.vue                   |  2 +-
 pages/datatable/DataTableCrudDemo.vue         |  4 +-
 pages/datatable/DataTableDemo.vue             |  4 +-
 pages/datatable/DataTableDoc.vue              |  8 +-
 pages/datatable/DataTableFilterDemo.vue       |  8 +-
 pages/datatable/DataTableRowExpandDemo.vue    |  2 +-
 pages/datatable/DataTableRowGroupDemo.vue     |  6 +-
 pages/datatable/DataTableScrollDemo.vue       |  2 +-
 pages/datatable/DataTableStateDemo.vue        |  8 +-
 pages/datatable/DataTableTemplatingDemo.vue   |  2 +-
 pages/dataview/DataViewDoc.vue                |  4 +-
 pages/dataview/index.vue                      |  4 +-
 pages/deferredcontent/index.vue               |  2 +-
 pages/dock/DockDoc.vue                        | 74 ++++++++---------
 pages/dock/index.vue                          | 22 ++---
 pages/dropdown/DropdownDoc.vue                |  4 +-
 pages/dynamicdialog/DynamicDialogDoc.vue      |  6 +-
 pages/dynamicdialog/ProductListDemo.vue       |  2 +-
 pages/galleria/GalleriaDoc.vue                | 60 +++++++-------
 pages/image/index.vue                         |  4 +-
 pages/inplace/InplaceDoc.vue                  |  2 +-
 pages/inplace/index.vue                       |  2 +-
 pages/landing/BlockSection.vue                | 14 ++--
 pages/landing/ComponentSection.vue            | 14 ++--
 pages/landing/DesignerSection.vue             |  4 +-
 pages/landing/FeaturesSection.vue             | 18 ++--
 pages/landing/FooterSection.vue               |  2 +-
 pages/landing/HeaderSection.vue               | 10 +--
 pages/landing/HeroSection.vue                 | 14 ++--
 pages/landing/TemplateSection.vue             |  4 +-
 pages/landing/ThemeSection.vue                |  4 +-
 pages/landing/UsersSection.vue                |  2 +-
 pages/listbox/ListboxDoc.vue                  |  2 +-
 pages/multiselect/MultiSelectDoc.vue          |  4 +-
 pages/orderlist/OrderListDoc.vue              |  4 +-
 pages/orderlist/index.vue                     |  2 +-
 .../OrganizationChartDoc.vue                  |  2 +-
 pages/organizationchart/index.vue             |  2 +-
 pages/overlaypanel/OverlayPanelDoc.vue        |  4 +-
 pages/overlaypanel/index.vue                  |  2 +-
 pages/paginator/index.vue                     |  2 +-
 pages/picklist/PickListDoc.vue                |  6 +-
 pages/picklist/index.vue                      |  2 +-
 pages/responsive/index.vue                    |  2 +-
 pages/selectbutton/SelectButtonDoc.vue        |  2 +-
 pages/timeline/TimelineDoc.vue                |  2 +-
 pages/timeline/index.vue                      |  2 +-
 pages/uikit/UIKit.vue                         | 12 +--
 public/demo/data/photos.json                  | 60 +++++++-------
 61 files changed, 321 insertions(+), 321 deletions(-)

diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 730405437..492f91d9b 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -29,25 +29,25 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
-                                <img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
+                                <img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
                             </button>
                             <span>Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
-                                <img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
+                                <img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
                             </button>
                             <span>Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
-                                <img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
+                                <img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
                             </button>
                             <span>Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
-                                <img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
+                                <img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
                             </button>
                             <span>Purple</span>
                         </div>
@@ -57,25 +57,25 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
-                                <img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
+                                <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
-                                <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
+                                <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
-                                <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
+                                <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
-                                <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
+                                <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
@@ -85,25 +85,25 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
-                                <img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
+                                <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
                             </button>
                             <span>Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
-                                <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
+                                <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
-                                <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
+                                <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
-                                <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
+                                <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
@@ -113,7 +113,7 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
-                                <img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
+                                <img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
                             </button>
                             <span>Tailwind Light</span>
                         </div>
@@ -123,7 +123,7 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
-                                <img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/>
+                                <img src="/demo/images/themes/fluent-light.png" alt="Fluent Light"/>
                             </button>
                             <span>Fluent Light</span>
                         </div>
@@ -133,49 +133,49 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
-                                <img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
+                                <img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
                             </button>
                             <span>Lara Light Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
-                                <img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
+                                <img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
                             </button>
                             <span>Lara Light Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
-                                <img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
+                                <img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
                             </button>
                             <span>Lara Light Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
-                                <img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
+                                <img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
                             </button>
                             <span>Lara Light Teal</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
-                                <img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
+                                <img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
                             </button>
                             <span>Lara Dark Indigo</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
-                                <img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
+                                <img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
                             </button>
                             <span>Lara Dark Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
-                                <img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
+                                <img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
                             </button>
                             <span>Lara Dark Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
-                                <img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
+                                <img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
                             </button>
                             <span>Lara Dark Teal</span>
                         </div>
@@ -185,73 +185,73 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
-                                <img src="demo/images/themes/saga-blue.png" alt="Saga Blue" />
+                                <img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" />
                             </button>
                             <span>Saga Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
-                                <img src="demo/images/themes/saga-green.png" alt="Saga Green" />
+                                <img src="/demo/images/themes/saga-green.png" alt="Saga Green" />
                             </button>
                             <span>Saga Green</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
-                                <img src="demo/images/themes/saga-orange.png" alt="Saga Orange" />
+                                <img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" />
                             </button>
                             <span>Saga Orange</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
-                                <img src="demo/images/themes/saga-purple.png" alt="Saga Purple" />
+                                <img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" />
                             </button>
                             <span>Saga Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
-                                <img src="demo/images/themes/vela-blue.png" alt="Vela Blue" />
+                                <img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" />
                             </button>
                             <span>Vela Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
-                                <img src="demo/images/themes/vela-green.png" alt="Vela Green" />
+                                <img src="/demo/images/themes/vela-green.png" alt="Vela Green" />
                             </button>
                             <span>Vela Green</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
-                                <img src="demo/images/themes/vela-orange.png" alt="Vela Orange" />
+                                <img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" />
                             </button>
                             <span>Vela Orange</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
-                                <img src="demo/images/themes/vela-purple.png" alt="Vela Purple" />
+                                <img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" />
                             </button>
                             <span>Vela Purple</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
-                                <img src="demo/images/themes/arya-blue.png" alt="Arya Blue" />
+                                <img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" />
                             </button>
                             <span>Arya Blue</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
-                                <img src="demo/images/themes/arya-green.png" alt="Arya Green" />
+                                <img src="/demo/images/themes/arya-green.png" alt="Arya Green" />
                             </button>
                             <span>Arya Green</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
-                                <img src="demo/images/themes/arya-orange.png" alt="Arya Orange" />
+                                <img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" />
                             </button>
                             <span>Arya Orange</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
-                                <img src="demo/images/themes/arya-purple.png" alt="Arya Purple" />
+                                <img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" />
                             </button>
                             <span>Arya Purple</span>
                         </div>
@@ -262,37 +262,37 @@
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
-                                <img src="demo/images/themes/soho-light.png" alt="Soho Light" />
+                                <img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
                             </button>
                             <span>Soho Light</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
-                                <img src="demo/images/themes/soho-dark.png" alt="Soho Dark" />
+                                <img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
                             </button>
                             <span>Soho Dark</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
-                                <img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
+                                <img src="/demo/images/themes/viva-light.svg" alt="Viva Light" />
                             </button>
                             <span>Viva Light</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
-                                <img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
+                                <img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" />
                             </button>
                             <span>Viva Dark</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
-                                <img src="demo/images/themes/mira.jpg" alt="Mira" />
+                                <img src="/demo/images/themes/mira.jpg" alt="Mira" />
                             </button>
                             <span>Mira</span>
                         </div>
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
-                                <img src="demo/images/themes/nano.jpg" alt="Mira" />
+                                <img src="/demo/images/themes/nano.jpg" alt="Mira" />
                             </button>
                             <span>Nano</span>
                         </div>
diff --git a/layouts/AppMenu.vue b/layouts/AppMenu.vue
index 56ea731ca..2d8e7bb71 100755
--- a/layouts/AppMenu.vue
+++ b/layouts/AppMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['layout-sidebar', {'active': active}]">
         <nuxt-link to="/" class="logo">
-            <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
+            <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
         </nuxt-link>
         <div class="layout-sidebar-filter p-fluid">
             <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search" 
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 3d945ee01..ad0fd2f77 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -4,7 +4,7 @@
             <i class="pi pi-bars"></i>
         </a>
         <!-- <div class="app-theme" v-tooltip.bottom="$appState.theme">
-            <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
+            <img :src="'/demo/images/themes/' + logoMap[$appState.theme]" />
         </div> -->
         <ul ref="topbarMenu" class="topbar-menu">
             <li class="topbar-submenu">
@@ -21,60 +21,60 @@
                         <li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li>
 
                         <li class="topbar-submenu-header">BOOTSTRAP</li>
-                        <li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
-                        <li><a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
 
                         <li class="topbar-submenu-header">MATERIAL DESIGN</li>
-                        <li><a @click="changeTheme($event, 'md-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
-                        <li><a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
 
                         <li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
-                        <li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
-                        <li><a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
 
                         <li class="topbar-submenu-header">TAILWIND</li>
-                        <li><a @click="changeTheme($event, 'tailwind-light')"><img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'tailwind-light')"><img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a></li>
 
                         <li class="topbar-submenu-header">FLUENT UI</li>
-                        <li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'fluent-light')"><img src="/demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
 
                         <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
-                        <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-teal')"><img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-teal')"><img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li>
 
                         <li class="topbar-submenu-header">PRIMEONE 2021</li>
-                        <li><a @click="changeTheme($event, 'saga-blue')"><img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-green')"><img src="demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-orange')"><img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-purple')"><img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-blue', true)"><img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-green', true)"><img src="demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-green', true)"><img src="demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-blue')"><img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-green')"><img src="/demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-orange')"><img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-purple')"><img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-blue', true)"><img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-green', true)"><img src="/demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-green', true)"><img src="/demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
 
                         <li class="topbar-submenu-header">PREMIUM</li>
-                        <li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
-                        <li><a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
-                        <li><a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
-                        <li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
-                        <li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
+                        <li><a @click="changeTheme($event, 'soho-light')"><img src="/demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-light')"><img src="/demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-dark', true)"><img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'mira')"><img src="/demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
+                        <li><a @click="changeTheme($event, 'nano')"><img src="/demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
                     </ul>
                 </transition>
             </li>
diff --git a/pages/autocomplete/AutoCompleteDoc.vue b/pages/autocomplete/AutoCompleteDoc.vue
index 53de054c3..5df5ea0cb 100755
--- a/pages/autocomplete/AutoCompleteDoc.vue
+++ b/pages/autocomplete/AutoCompleteDoc.vue
@@ -133,7 +133,7 @@ export default {
         <pre v-code><code><template v-pre>
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
     &lt;template #item="slotProps"&gt;
-		&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
+		&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt;
         &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/AutoComplete&gt;
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index c50b064fd..52c896302 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -67,9 +67,9 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                        <Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                        <Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
+                        <Avatar image="/demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="/demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                        <Avatar image="/demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
                     </div>
                 </div>
 
@@ -77,11 +77,11 @@
                     <div class="card">
                         <h5>Avatar Group</h5>
                         <AvatarGroup class="mb-3">
-                            <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle" />
-                            <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-                            <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
-                            <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
-                            <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                            <Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle" />
+                            <Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                            <Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                            <Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                            <Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
                             <Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
@@ -90,7 +90,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
-                        <Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
+                        <Avatar image="/demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
                     </div>
                 </div>
             </div>
diff --git a/pages/card/CardDoc.vue b/pages/card/CardDoc.vue
index 2668499b9..34b5121f5 100755
--- a/pages/card/CardDoc.vue
+++ b/pages/card/CardDoc.vue
@@ -18,7 +18,7 @@ import Card from 'primevue/card';
         <pre v-code><code>
 &lt;Card&gt;
     &lt;template #header&gt;
-        &lt;img alt="user header" src="demo/images/usercard.png"&gt;
+        &lt;img alt="user header" src="/demo/images/usercard.png"&gt;
     &lt;/template&gt;
     &lt;template #title&gt;
         Advanced Card
diff --git a/pages/card/index.vue b/pages/card/index.vue
index bf3c14363..7a1e5acc6 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -21,7 +21,7 @@
 
             <Card style="width: 25em">
                 <template #header>
-                    <img alt="user header" src="/demo/images/usercard.png" />
+                    <img alt="user header" src="//demo/images/usercard.png" />
                 </template>
                 <template #title> Advanced Card </template>
                 <template #subtitle> Card subtitle </template>
diff --git a/pages/carousel/CarouselDoc.vue b/pages/carousel/CarouselDoc.vue
index f3f750e94..aa6502059 100755
--- a/pages/carousel/CarouselDoc.vue
+++ b/pages/carousel/CarouselDoc.vue
@@ -44,7 +44,7 @@ import Carousel from 'primevue/carousel';
 		&lt;div class="car-item"&gt;
             &lt;div class="car-content"&gt;
                 &lt;div&gt;
-                    &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
+                    &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
                     &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index dfa3aeecf..3b3ffc0c7 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -18,7 +18,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -45,7 +45,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -72,7 +72,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index 3798ae0f6..57b7285e5 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -28,18 +28,18 @@
 
                 <h5>Image</h5>
                 <div class="flex align-items-center">
-                    <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
-                    <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
-                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
-                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
+                    <Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2" />
+                    <Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2" />
+                    <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2" />
+                    <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" removable />
                 </div>
 
                 <h5>Styling</h5>
                 <div class="flex align-items-center">
                     <Chip label="Action" class="mr-2 custom-chip" />
                     <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
-                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
-                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
+                    <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
                 </div>
             </div>
         </div>
diff --git a/pages/colorpicker/index.vue b/pages/colorpicker/index.vue
index b3e082f49..f84f5741b 100755
--- a/pages/colorpicker/index.vue
+++ b/pages/colorpicker/index.vue
@@ -22,7 +22,7 @@
                 <div class="flex flex-column align-items-center md:flex-row md:align-items-start">
                     <ColorPicker v-model="color3" :inline="true" />
                     <div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex">
-                        <img alt="room" src="demo/images/interior.png" class="w-full md:auto" />
+                        <img alt="room" src="/demo/images/interior.png" class="w-full md:auto" />
                     </div>
                 </div>
             </div>
diff --git a/pages/contextmenu/ContextMenuDoc.vue b/pages/contextmenu/ContextMenuDoc.vue
index e534d46bc..6a3b07538 100755
--- a/pages/contextmenu/ContextMenuDoc.vue
+++ b/pages/contextmenu/ContextMenuDoc.vue
@@ -170,7 +170,7 @@ export default {
         <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
 
         <pre v-code><code>
-&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
+&lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
 &lt;ContextMenu ref="menu" :model="items" /&gt;
 
 </code></pre>
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index a43e83fe4..9d5a69c6c 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -13,7 +13,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                <img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
                 <ContextMenu ref="menu" :model="items" />
             </div>
         </div>
diff --git a/pages/datatable/DataTableCrudDemo.vue b/pages/datatable/DataTableCrudDemo.vue
index 66772bcfe..c28491bed 100755
--- a/pages/datatable/DataTableCrudDemo.vue
+++ b/pages/datatable/DataTableCrudDemo.vue
@@ -50,7 +50,7 @@
                     <Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@@ -79,7 +79,7 @@
             </div>
 
             <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
+                <img :src="'/demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
                 <div class="field">
                     <label for="name">Name</label>
                     <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
diff --git a/pages/datatable/DataTableDemo.vue b/pages/datatable/DataTableDemo.vue
index ef3ddea93..17a05cb69 100755
--- a/pages/datatable/DataTableDemo.vue
+++ b/pages/datatable/DataTableDemo.vue
@@ -58,7 +58,7 @@
                     </Column>
                     <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -66,7 +66,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
diff --git a/pages/datatable/DataTableDoc.vue b/pages/datatable/DataTableDoc.vue
index cf92ea0ef..1a31a56b5 100755
--- a/pages/datatable/DataTableDoc.vue
+++ b/pages/datatable/DataTableDoc.vue
@@ -526,7 +526,7 @@ export default {
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;
         &lt;template #body="slotProps"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
@@ -1133,7 +1133,7 @@ matchModes: [
     &lt;template #expansion="slotProps"&gt;
         &lt;div class="car-details"&gt;
             &lt;div&gt;
-                &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
                 &lt;div class="grid"&gt;
                     &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                     &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@@ -1212,7 +1212,7 @@ export default {
             &lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt;
                 &lt;template #option="optionProps"&gt;
                     &lt;div class="p-dropdown-car-option"&gt;
-                        &lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
+                        &lt;img :alt="optionProps.option.brand" :src="'/demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
                         &lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
@@ -1610,7 +1610,7 @@ export default {
             &lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
                 &lt;template #option="slotProps"&gt;
                     &lt;div class="p-dropdown-car-option"&gt;
-                        &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+                        &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
                         &lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
diff --git a/pages/datatable/DataTableFilterDemo.vue b/pages/datatable/DataTableFilterDemo.vue
index 1a980539f..3430904d7 100755
--- a/pages/datatable/DataTableFilterDemo.vue
+++ b/pages/datatable/DataTableFilterDemo.vue
@@ -64,7 +64,7 @@
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -72,7 +72,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -178,14 +178,14 @@
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
                             <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
diff --git a/pages/datatable/DataTableRowExpandDemo.vue b/pages/datatable/DataTableRowExpandDemo.vue
index 3fc327a34..687962e61 100755
--- a/pages/datatable/DataTableRowExpandDemo.vue
+++ b/pages/datatable/DataTableRowExpandDemo.vue
@@ -21,7 +21,7 @@
                     <Column field="name" header="Name" sortable></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" sortable>
diff --git a/pages/datatable/DataTableRowGroupDemo.vue b/pages/datatable/DataTableRowGroupDemo.vue
index 5d94a576e..0ff194c63 100755
--- a/pages/datatable/DataTableRowGroupDemo.vue
+++ b/pages/datatable/DataTableRowGroupDemo.vue
@@ -29,7 +29,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -73,7 +73,7 @@
                     </Column>
                     <Column field="date" header="Date"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -93,7 +93,7 @@
                     </Column>
                     <Column field="representative.name" header="Representative">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                     </Column>
diff --git a/pages/datatable/DataTableScrollDemo.vue b/pages/datatable/DataTableScrollDemo.vue
index 54ae723cb..f4baef13c 100755
--- a/pages/datatable/DataTableScrollDemo.vue
+++ b/pages/datatable/DataTableScrollDemo.vue
@@ -116,7 +116,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
diff --git a/pages/datatable/DataTableStateDemo.vue b/pages/datatable/DataTableStateDemo.vue
index 783d041c1..e4f840833 100755
--- a/pages/datatable/DataTableStateDemo.vue
+++ b/pages/datatable/DataTableStateDemo.vue
@@ -45,14 +45,14 @@
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -111,14 +111,14 @@
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
diff --git a/pages/datatable/DataTableTemplatingDemo.vue b/pages/datatable/DataTableTemplatingDemo.vue
index b154673f1..fdd92a1b7 100755
--- a/pages/datatable/DataTableTemplatingDemo.vue
+++ b/pages/datatable/DataTableTemplatingDemo.vue
@@ -20,7 +20,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price">
diff --git a/pages/dataview/DataViewDoc.vue b/pages/dataview/DataViewDoc.vue
index f4b5f5ba8..1e9a7bc06 100755
--- a/pages/dataview/DataViewDoc.vue
+++ b/pages/dataview/DataViewDoc.vue
@@ -48,7 +48,7 @@ export default {
 	&lt;div class="col-12"&gt;
         &lt;div class="car-details"&gt;
             &lt;div&gt;
-                &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
                 &lt;div class="grid"&gt;
                     &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                     &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@@ -63,7 +63,7 @@ export default {
 &lt;template #grid="slotProps"&gt;
 	&lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
-			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+			&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
 			&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
 			&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
 		&lt;/Panel&gt;
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 278dd408b..817719aaf 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -25,7 +25,7 @@
                     <template #list="slotProps">
                         <div class="col-12">
                             <div class="product-list-item">
-                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
+                                <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
                                 <div class="product-list-detail">
                                     <div class="product-name">{{ slotProps.data.name }}</div>
                                     <div class="product-description">{{ slotProps.data.description }}</div>
@@ -52,7 +52,7 @@
                                     <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
                                 </div>
                                 <div class="product-grid-item-content">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
                                     <div class="product-name">{{ slotProps.data.name }}</div>
                                     <div class="product-description">{{ slotProps.data.description }}</div>
                                     <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
diff --git a/pages/deferredcontent/index.vue b/pages/deferredcontent/index.vue
index ffb3341f5..7e6301bc8 100755
--- a/pages/deferredcontent/index.vue
+++ b/pages/deferredcontent/index.vue
@@ -13,7 +13,7 @@
                 <div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div>
 
                 <!-- <DeferredContent @load="onImageLoad">
-                    <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
+                    <img src="/demo/images/nature/nature4.jpg" alt="Nature"/>
                 </DeferredContent> -->
 
                 <div style="height: 500px"></div>
diff --git a/pages/dock/DockDoc.vue b/pages/dock/DockDoc.vue
index f6bb1734f..6aee31713 100644
--- a/pages/dock/DockDoc.vue
+++ b/pages/dock/DockDoc.vue
@@ -28,19 +28,19 @@ import Dock from 'primevue/dock';
                 items: [
                     {
                         label: "Finder",
-                        icon: "demo/images/dock/finder.svg"
+                        icon: "/demo/images/dock/finder.svg"
                     },
                     {
                         label: "App Store",
-                        icon: "demo/images/dock/appstore.svg"
+                        icon: "/demo/images/dock/appstore.svg"
                     },
                     {
                         label: "Photos",
-                        icon: "demo/images/dock/photos.svg"
+                        icon: "/demo/images/dock/photos.svg"
                     },
                     {
                         label: "Trash",
-                        icon: "demo/images/dock/trash.png"
+                        icon: "/demo/images/dock/trash.png"
                     }
                 ]
             }
@@ -258,46 +258,46 @@ export default {
             dockItems: [
                 {
                     label: 'Finder',
-                    icon: "demo/images/dock/finder.svg",
+                    icon: "/demo/images/dock/finder.svg",
                     command: () => {
                         this.displayFinder = true;
                     }
                 },
                 {
                     label: 'Terminal',
-                    icon: "demo/images/dock/terminal.svg",
+                    icon: "/demo/images/dock/terminal.svg",
                     command: () => {
                         this.displayTerminal = true;
                     }
                 },
                 {
                     label: 'App Store',
-                    icon: "demo/images/dock/appstore.svg",
+                    icon: "/demo/images/dock/appstore.svg",
                     command: () => {
                         this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Safari',
-                    icon: "demo/images/dock/safari.svg",
+                    icon: "/demo/images/dock/safari.svg",
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Photos',
-                    icon: "demo/images/dock/photos.svg",
+                    icon: "/demo/images/dock/photos.svg",
                     command: () => {
                         this.displayPhotos = true;
                     }
                 },
                 {
                     label: 'GitHub',
-                    icon: "demo/images/dock/github.svg",
+                    icon: "/demo/images/dock/github.svg",
                 },
                 {
                     label: 'Trash',
-                    icon: "demo/images/dock/trash.png",
+                    icon: "/demo/images/dock/trash.png",
                     command: () => {
                         this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                     }
@@ -306,19 +306,19 @@ export default {
             dockBasicItems: [
                 {
                     label: "Finder",
-                    icon: "demo/images/dock/finder.svg"
+                    icon: "/demo/images/dock/finder.svg"
                 },
                 {
                     label: "App Store",
-                    icon: "demo/images/dock/appstore.svg"
+                    icon: "/demo/images/dock/appstore.svg"
                 },
                 {
                     label: "Photos",
-                    icon: "demo/images/dock/photos.svg"
+                    icon: "/demo/images/dock/photos.svg"
                 },
                 {
                     label: "Trash",
-                    icon: "demo/images/dock/trash.png"
+                    icon: "/demo/images/dock/trash.png"
                 }
             ],
             menubarItems: [
@@ -674,46 +674,46 @@ export default {
         const dockItems = ref([
             {
                 label: 'Finder',
-                icon: "demo/images/dock/finder.svg",
+                icon: "/demo/images/dock/finder.svg",
                 command: () => {
                     displayFinder.value = true;
                 }
             },
             {
                 label: 'Terminal',
-                icon: "demo/images/dock/terminal.svg",
+                icon: "/demo/images/dock/terminal.svg",
                 command: () => {
                     displayTerminal.value = true;
                 }
             },
             {
                 label: 'App Store',
-                icon: "demo/images/dock/appstore.svg",
+                icon: "/demo/images/dock/appstore.svg",
                 command: () => {
                     toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                 }
             },
             {
                 label: 'Safari',
-                icon: "demo/images/dock/safari.svg",
+                icon: "/demo/images/dock/safari.svg",
                 command: () => {
                     toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                 }
             },
             {
                 label: 'Photos',
-                icon: "demo/images/dock/photos.svg",
+                icon: "/demo/images/dock/photos.svg",
                 command: () => {
                     displayPhotos.value = true;
                 }
             },
             {
                 label: 'GitHub',
-                icon: "demo/images/dock/github.svg",
+                icon: "/demo/images/dock/github.svg",
             },
             {
                 label: 'Trash',
-                icon: "demo/images/dock/trash.png",
+                icon: "/demo/images/dock/trash.png",
                 command: () => {
                     toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                 }
@@ -722,19 +722,19 @@ export default {
         const dockBasicItems = ref([
             {
                 label: "Finder",
-                icon: "demo/images/dock/finder.svg"
+                icon: "/demo/images/dock/finder.svg"
             },
             {
                 label: "App Store",
-                icon: "demo/images/dock/appstore.svg"
+                icon: "/demo/images/dock/appstore.svg"
             },
             {
                 label: "Photos",
-                icon: "demo/images/dock/photos.svg"
+                icon: "/demo/images/dock/photos.svg"
             },
             {
                 label: "Trash",
-                icon: "demo/images/dock/trash.png"
+                icon: "/demo/images/dock/trash.png"
             }
         ]);
         const menubarItems = ref([
@@ -1113,46 +1113,46 @@ export default {
                 const dockItems = ref([
                     {
                         label: 'Finder',
-                        icon: "demo/images/dock/finder.svg",
+                        icon: "/demo/images/dock/finder.svg",
                         command: () => {
                             displayFinder.value = true;
                         }
                     },
                     {
                         label: 'Terminal',
-                        icon: "demo/images/dock/terminal.svg",
+                        icon: "/demo/images/dock/terminal.svg",
                         command: () => {
                             displayTerminal.value = true;
                         }
                     },
                     {
                         label: 'App Store',
-                        icon: "demo/images/dock/appstore.svg",
+                        icon: "/demo/images/dock/appstore.svg",
                         command: () => {
                             toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                         }
                     },
                     {
                         label: 'Safari',
-                        icon: "demo/images/dock/safari.svg",
+                        icon: "/demo/images/dock/safari.svg",
                         command: () => {
                             toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                         }
                     },
                     {
                         label: 'Photos',
-                        icon: "demo/images/dock/photos.svg",
+                        icon: "/demo/images/dock/photos.svg",
                         command: () => {
                             displayPhotos.value = true;
                         }
                     },
                     {
                         label: 'GitHub',
-                        icon: "demo/images/dock/github.svg",
+                        icon: "/demo/images/dock/github.svg",
                     },
                     {
                         label: 'Trash',
-                        icon: "demo/images/dock/trash.png",
+                        icon: "/demo/images/dock/trash.png",
                         command: () => {
                             toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                         }
@@ -1161,19 +1161,19 @@ export default {
                 const dockBasicItems = ref([
                     {
                         label: "Finder",
-                        icon: "demo/images/dock/finder.svg"
+                        icon: "/demo/images/dock/finder.svg"
                     },
                     {
                         label: "App Store",
-                        icon: "demo/images/dock/appstore.svg"
+                        icon: "/demo/images/dock/appstore.svg"
                     },
                     {
                         label: "Photos",
-                        icon: "demo/images/dock/photos.svg"
+                        icon: "/demo/images/dock/photos.svg"
                     },
                     {
                         label: "Trash",
-                        icon: "demo/images/dock/trash.png"
+                        icon: "/demo/images/dock/trash.png"
                     }
                 ]);
                 const menubarItems = ref([
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 8413169b0..412a19ce6 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -97,46 +97,46 @@ export default {
             dockItems: [
                 {
                     label: 'Finder',
-                    icon: 'demo/images/dock/finder.svg',
+                    icon: '/demo/images/dock/finder.svg',
                     command: () => {
                         this.displayFinder = true;
                     }
                 },
                 {
                     label: 'Terminal',
-                    icon: 'demo/images/dock/terminal.svg',
+                    icon: '/demo/images/dock/terminal.svg',
                     command: () => {
                         this.displayTerminal = true;
                     }
                 },
                 {
                     label: 'App Store',
-                    icon: 'demo/images/dock/appstore.svg',
+                    icon: '/demo/images/dock/appstore.svg',
                     command: () => {
                         this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Safari',
-                    icon: 'demo/images/dock/safari.svg',
+                    icon: '/demo/images/dock/safari.svg',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Photos',
-                    icon: 'demo/images/dock/photos.svg',
+                    icon: '/demo/images/dock/photos.svg',
                     command: () => {
                         this.displayPhotos = true;
                     }
                 },
                 {
                     label: 'GitHub',
-                    icon: 'demo/images/dock/github.svg'
+                    icon: '/demo/images/dock/github.svg'
                 },
                 {
                     label: 'Trash',
-                    icon: 'demo/images/dock/trash.png',
+                    icon: '/demo/images/dock/trash.png',
                     command: () => {
                         this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                     }
@@ -145,19 +145,19 @@ export default {
             dockBasicItems: [
                 {
                     label: 'Finder',
-                    icon: 'demo/images/dock/finder.svg'
+                    icon: '/demo/images/dock/finder.svg'
                 },
                 {
                     label: 'App Store',
-                    icon: 'demo/images/dock/appstore.svg'
+                    icon: '/demo/images/dock/appstore.svg'
                 },
                 {
                     label: 'Photos',
-                    icon: 'demo/images/dock/photos.svg'
+                    icon: '/demo/images/dock/photos.svg'
                 },
                 {
                     label: 'Trash',
-                    icon: 'demo/images/dock/trash.png'
+                    icon: '/demo/images/dock/trash.png'
                 }
             ],
             menubarItems: [
diff --git a/pages/dropdown/DropdownDoc.vue b/pages/dropdown/DropdownDoc.vue
index 9324755c5..5a7c6a4e0 100755
--- a/pages/dropdown/DropdownDoc.vue
+++ b/pages/dropdown/DropdownDoc.vue
@@ -104,7 +104,7 @@ export default {
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
     &lt;template #value="slotProps"&gt;
         &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
-            &lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
+            &lt;img :alt="slotProps.value.brand" :src="'/demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
             &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
         &lt;/div&gt;
         &lt;span v-else&gt;
@@ -113,7 +113,7 @@ export default {
     &lt;/template&gt;
     &lt;template #option="slotProps"&gt;
 		&lt;div class="p-dropdown-car-option"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
diff --git a/pages/dynamicdialog/DynamicDialogDoc.vue b/pages/dynamicdialog/DynamicDialogDoc.vue
index 18f1cb1a8..412a68f59 100644
--- a/pages/dynamicdialog/DynamicDialogDoc.vue
+++ b/pages/dynamicdialog/DynamicDialogDoc.vue
@@ -512,7 +512,7 @@ export default {
 			<p-column field="name" header="Name"></p-column>
             <p-column header="Image">
                 <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </p-column>
 			<p-column field="category" header="Category"></p-column>
@@ -610,7 +610,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -709,7 +709,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
diff --git a/pages/dynamicdialog/ProductListDemo.vue b/pages/dynamicdialog/ProductListDemo.vue
index 379305802..9ebb550c8 100644
--- a/pages/dynamicdialog/ProductListDemo.vue
+++ b/pages/dynamicdialog/ProductListDemo.vue
@@ -8,7 +8,7 @@
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
             <Column field="category" header="Category"></Column>
diff --git a/pages/galleria/GalleriaDoc.vue b/pages/galleria/GalleriaDoc.vue
index e8a36e6fc..7ae1cff43 100755
--- a/pages/galleria/GalleriaDoc.vue
+++ b/pages/galleria/GalleriaDoc.vue
@@ -32,92 +32,92 @@ import Galleria from 'primevue/galleria';
 {
     "data":[
         {
-            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }
diff --git a/pages/image/index.vue b/pages/image/index.vue
index c53dc486e..82a384304 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -11,10 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <Image src="demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
+                <Image src="/demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
 
                 <h5>Preview</h5>
-                <Image src="demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
+                <Image src="/demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
             </div>
         </div>
 
diff --git a/pages/inplace/InplaceDoc.vue b/pages/inplace/InplaceDoc.vue
index 5b0948911..087cbce91 100755
--- a/pages/inplace/InplaceDoc.vue
+++ b/pages/inplace/InplaceDoc.vue
@@ -23,7 +23,7 @@ import Inplace from 'primevue/inplace';
         &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
     &lt;/template&gt;
     &lt;template #content&gt;
-        &lt;img src="demo/images/nature/nature1.jpg" /&gt;
+        &lt;img src="/demo/images/nature/nature1.jpg" /&gt;
     &lt;/template&gt;
 &lt;/Inplace&gt;
 </template>
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index bc54de3f8..a58c551ac 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -27,7 +27,7 @@
                         <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
                     </template>
                     <template #content>
-                        <img src="demo/images/nature/nature1.jpg" />
+                        <img src="/demo/images/nature/nature1.jpg" />
                     </template>
                 </Inplace>
 
diff --git a/pages/landing/BlockSection.vue b/pages/landing/BlockSection.vue
index 5a426a165..687060769 100644
--- a/pages/landing/BlockSection.vue
+++ b/pages/landing/BlockSection.vue
@@ -13,7 +13,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -106,7 +106,7 @@
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -148,7 +148,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -214,7 +214,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -278,7 +278,7 @@
                 <div class="prime-block  flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -341,7 +341,7 @@
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -356,7 +356,7 @@
                         <div class="block-main h-full flex justify-content-center align-items-center flex-column">
                             <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
                                 <div class="-mt-4">
-                                    <img src="demo/images/landing/blocks/question.svg" alt="question mark" />
+                                    <img src="/demo/images/landing/blocks/question.svg" alt="question mark" />
                                 </div>
                                 <div class="bar w-2rem mt-2"></div>
                                 <div class="bar w-6rem mt-2"></div>
diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue
index c86e16762..3bbee0635 100644
--- a/pages/landing/ComponentSection.vue
+++ b/pages/landing/ComponentSection.vue
@@ -35,31 +35,31 @@
                 <div class="box p-4">
                     <ul class="list-none p-0 m-0">
                         <li class="flex align-items-center mb-3">
-                            <img src="demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
+                            <img src="/demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Darrel Steward</span>
                             <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
                             <span class="text-secondary font-medium">15%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
+                            <img src="/demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Albert Flores</span>
                             <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
                             <span class="text-secondary font-medium">85%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
+                            <img src="/demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Kathryn Murphy</span>
                             <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
                             <span class="text-secondary font-medium">50%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
+                            <img src="/demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Cody Fisher</span>
                             <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
                             <span class="text-secondary font-medium">75%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
+                            <img src="/demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Brandon Atkinson</span>
                             <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
                             <span class="text-secondary font-medium">60%</span>
@@ -70,7 +70,7 @@
             <div class="flex flex-column justify-content-start px-3 z-1">
                 <div class="box p-4 mb-5">
                     <div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius:'10px'">
-                        <img src="demo/images/landing/watch.png" alt="Watch"/>
+                        <img src="/demo/images/landing/watch.png" alt="Watch"/>
                     </div>
                     <div class="flex align-items-center mb-4">
                         <div class="flex flex-column">
@@ -105,7 +105,7 @@
                     <ul class="list-none p-0 m-0">
                         <li class="flex mb-3">
                             <span class="mr-3">
-                                <img src="demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
+                                <img src="/demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
                             </span>
                             <div class="flex flex-column">
                                 <span class="font-bold mb-2">Amanda Williams</span>
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 508d0c716..5145c32d3 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -3,11 +3,11 @@
         <div class="section-header">Theme Designer</div>
         <p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
         <div class="designer-main mt-7 justify-content-center pad-section"
-            :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize:'cover'}">
+            :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize:'cover'}">
             <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
                 <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
                     <div class="text-center mb-4">
-                        <img :src="'demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
+                        <img :src="'/demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
                     </div>
                     <div class="p-fluid">
                         <span class="font-semibold block mb-3">Primary</span>
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 4bc881df3..1d274a0cc 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -2,59 +2,59 @@
     <section class="landing-features py-8">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
-        <div class="grid mt-7 pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
+        <div class="grid mt-7 pad-section" :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
                     <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Community</div>
                     <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Productivity</div>
                     <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Accessibility</div>
                     <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
                     <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Mobile</div>
                     <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Themes</div>
                     <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/>
+                    <img src="/demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/>
                     <div class="font-semibold mb-3 text-lg">Typescript</div>
                     <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                 </div>
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index c81005237..f68b0423f 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -69,7 +69,7 @@
 
         <div class="flex justify-content-between py-6">
             <span>
-                <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+                <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
             </span>
             <div class="flex align-items-center">
                 <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index 239227520..bd9b85089 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -1,7 +1,7 @@
 <template>
     <section :ref="containerRef" :class="['landing-header pad-section', {'landing-header-active': menuActive}]">
         <span>
-            <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo"/>
+            <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo"/>
         </span>
 
         <div class="flex align-items-center">
@@ -9,25 +9,25 @@
                 <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
                     <li class="mr-0 lg:mr-2">
                         <nuxt-link to="/setup">
-                            <img src="demo/images/landing/core-icon.svg" alt="primevue core" />
+                            <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
                             <span>Components</span>
                         </nuxt-link>
                     </li>
                     <li class="mr-0 lg:mr-2">
                         <a href="https://www.primefaces.org/primeblocks-vue">
-                            <img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
                             <span>Blocks</span>
                         </a>
                     </li>
                     <li class="mr-0 lg:mr-2">
                         <a href="https://www.primefaces.org/designer-vue">
-                            <img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
                             <span>Designer</span>
                         </a>
                     </li>
                     <li class="mr-0 lg:mr-2">
                         <a href="https://www.primefaces.org/store/templates.xhtml">
-                            <img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
                             <span>Templates</span>
                         </a>
                     </li>
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index b9833bf5d..444e96e53 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -5,7 +5,7 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
                         <div class="flex flex-column align-items-center">
-                            <img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Templates</b>
                                 <span>Spectacular Designs</span>
@@ -14,7 +14,7 @@
                     </div>
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center"  @click="navigateTo('https://www.primefaces.org/designer-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Theme Designer</b>
                                 <span>Create Your Own</span>
@@ -25,7 +25,7 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="demo/images/landing/core-icon.svg" alt="primevue core" />
+                            <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
                             <div class="name">
                                 <b>Open Source</b>
                                 <span>90+ UI Components</span>
@@ -35,7 +35,7 @@
                     <nuxt-link to="/setup">
                         <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
                             <div class="hero-box-inner text-center">
-                                <img src="demo/images/landing/overview-icon.svg" alt="primevue main" />
+                                <img src="/demo/images/landing/overview-icon.svg" alt="primevue main" />
                                 <div class="name">
                                     <b class="font-bold">NEXT-GEN VUE UI</b>
                                 </div>
@@ -44,7 +44,7 @@
                     </nuxt-link>
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
                         <div class="flex flex-column align-items-center">
-                            <img src="demo/images/landing/css-icon.svg" alt="primevue icons" />
+                            <img src="/demo/images/landing/css-icon.svg" alt="primevue icons" />
                             <div class="name">
                                 <b>CSS Utilities</b>
                                 <span>PrimeFlex CSS</span>
@@ -55,7 +55,7 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
+                            <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Prime Blocks</b>
                                 <span>350+ UI Blocks</span>
@@ -65,7 +65,7 @@
                     <nuxt-link to="/icons">
                         <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
                             <div class="flex flex-column align-items-center">
-                                <img src="demo/images/landing/icons-icon.svg" alt="primevue templates" />
+                                <img src="/demo/images/landing/icons-icon.svg" alt="primevue templates" />
                                 <div class="name">
                                     <b>Icon Library</b>
                                     <span>200+ Icons</span>
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index 9208089ee..a69b60d59 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -122,10 +122,10 @@ export default {
             const isDark = this.$appState.darkTheme;
             const url = template === 'templates-text' ? 'png' : 'jpeg';
 
-            return `url('demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`
+            return `url('/demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`
         },
         templateImg() {
-            return `demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`
+            return `/demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`
         }
     }
 }
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 609d0fdf0..2f0cb0ac3 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -8,7 +8,7 @@
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
             <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
         </div>
-        <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
+        <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
             <div class="box overflow-hidden z-1 p-5 table-container">
                 <DataTable :value="customers" :paginator="true" :rows="5"
                     dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
@@ -44,7 +44,7 @@
                     </Column>
                     <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
                         <template #body="{data}">
-                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
                         </template>
                     </Column>
diff --git a/pages/landing/UsersSection.vue b/pages/landing/UsersSection.vue
index b1844764f..3b032ed64 100644
--- a/pages/landing/UsersSection.vue
+++ b/pages/landing/UsersSection.vue
@@ -71,7 +71,7 @@
 export default {
     methods: {
         imgSrc(brand) {
-            return `demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
+            return `/demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
         }
     },
     computed: {
diff --git a/pages/listbox/ListboxDoc.vue b/pages/listbox/ListboxDoc.vue
index 83e98ae29..ef6c8c889 100755
--- a/pages/listbox/ListboxDoc.vue
+++ b/pages/listbox/ListboxDoc.vue
@@ -111,7 +111,7 @@ export default {
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
     &lt;template #option="slotProps"&gt;
 		&lt;div&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
diff --git a/pages/multiselect/MultiSelectDoc.vue b/pages/multiselect/MultiSelectDoc.vue
index 216708a01..49b8171ec 100755
--- a/pages/multiselect/MultiSelectDoc.vue
+++ b/pages/multiselect/MultiSelectDoc.vue
@@ -113,7 +113,7 @@ export default {
 &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
 	&lt;template #value="slotProps"&gt;
 		&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
-			&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
+			&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt;
 			&lt;span&gt;{{option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 		&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@@ -122,7 +122,7 @@ export default {
 	&lt;/template&gt;
 	&lt;template #option="slotProps"&gt;
 		&lt;div class="p-multiselect-car-option"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
diff --git a/pages/orderlist/OrderListDoc.vue b/pages/orderlist/OrderListDoc.vue
index 3403db8c6..db8ed44d9 100755
--- a/pages/orderlist/OrderListDoc.vue
+++ b/pages/orderlist/OrderListDoc.vue
@@ -23,7 +23,7 @@ import OrderList from 'primevue/orderlist';
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -49,7 +49,7 @@ import OrderList from 'primevue/orderlist';
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index ad562c231..feb73e124 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -15,7 +15,7 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="image-container">
-                                <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                                <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
                                 <h6 class="mb-2">{{ slotProps.item.name }}</h6>
diff --git a/pages/organizationchart/OrganizationChartDoc.vue b/pages/organizationchart/OrganizationChartDoc.vue
index 4f5fe9a9f..a3d37be6f 100755
--- a/pages/organizationchart/OrganizationChartDoc.vue
+++ b/pages/organizationchart/OrganizationChartDoc.vue
@@ -256,7 +256,7 @@ export default {
     &lt;template #person="slotProps"&gt;
         &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
         &lt;div class="node-content"&gt;
-            &lt;img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
+            &lt;img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
             &lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 800ef6f73..89af14840 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -25,7 +25,7 @@
                     <template #person="slotProps">
                         <div class="node-header ui-corner-top">{{ slotProps.node.data.label }}</div>
                         <div class="node-content">
-                            <img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32" />
+                            <img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32" />
                             <div>{{ slotProps.node.data.name }}</div>
                         </div>
                     </template>
diff --git a/pages/overlaypanel/OverlayPanelDoc.vue b/pages/overlaypanel/OverlayPanelDoc.vue
index 424810046..dbe7af628 100755
--- a/pages/overlaypanel/OverlayPanelDoc.vue
+++ b/pages/overlaypanel/OverlayPanelDoc.vue
@@ -19,7 +19,7 @@ import OverlayPanel from 'primevue/overlaypanel';
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 
 &lt;OverlayPanel ref="op"&gt;
-	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
 
 </code></pre>
@@ -35,7 +35,7 @@ toggle(event) {
         <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
         <pre v-code><code>
 &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
-	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
 
 </code></pre>
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index 46450a0bb..bcb914673 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -17,7 +17,7 @@
                         <Column field="name" header="Name" sortable style="width: 50%"></Column>
                         <Column header="Image" style="width: 20%">
                             <template #body="slotProps">
-                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                                <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                             </template>
                         </Column>
                         <Column field="price" header="Price" sortable style="width: 30%">
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index 5b88ecfaf..d48728ed7 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -24,7 +24,7 @@
                 </Paginator>
 
                 <div class="image-gallery">
-                    <img :src="'demo/images/nature/' + image + '.jpg'" />
+                    <img :src="'/demo/images/nature/' + image + '.jpg'" />
                 </div>
             </div>
         </div>
diff --git a/pages/picklist/PickListDoc.vue b/pages/picklist/PickListDoc.vue
index 1d973591b..2395cb721 100755
--- a/pages/picklist/PickListDoc.vue
+++ b/pages/picklist/PickListDoc.vue
@@ -19,7 +19,7 @@ import PickList from 'primevue/picklist';
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -45,7 +45,7 @@ import PickList from 'primevue/picklist';
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -66,7 +66,7 @@ import PickList from 'primevue/picklist';
 &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index 13b8bbbbc..f1c7e684c 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -16,7 +16,7 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="image-container">
-                                <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                                <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
                                 <h6 class="mb-2">{{ slotProps.item.name }}</h6>
diff --git a/pages/responsive/index.vue b/pages/responsive/index.vue
index 6d382a0d8..def1760bc 100644
--- a/pages/responsive/index.vue
+++ b/pages/responsive/index.vue
@@ -394,7 +394,7 @@
                                 <Column field="name" header="Name" sortable></Column>
                                 <Column header="Image">
                                     <template #body="slotProps">
-                                        <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                                        <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                                     </template>
                                 </Column>
                                 <Column field="price" header="Price" sortable>
diff --git a/pages/selectbutton/SelectButtonDoc.vue b/pages/selectbutton/SelectButtonDoc.vue
index 2b4b1b33c..6206b98bf 100755
--- a/pages/selectbutton/SelectButtonDoc.vue
+++ b/pages/selectbutton/SelectButtonDoc.vue
@@ -49,7 +49,7 @@ export default {
 &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
 	&lt;template #option="slotProps"&gt;
         &lt;div class="car-option"&gt;
-            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+            &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
             &lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
         &lt;/div&gt;
 	&lt;/template&gt;
diff --git a/pages/timeline/TimelineDoc.vue b/pages/timeline/TimelineDoc.vue
index 1aba78cbf..fe4d55f00 100644
--- a/pages/timeline/TimelineDoc.vue
+++ b/pages/timeline/TimelineDoc.vue
@@ -110,7 +110,7 @@ export default {
 				&#123;&#123;slotProps.item.date&#125;&#125;
 			&lt;/template&gt;
 			&lt;template #content&gt;
-				&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
+				&lt;img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
 				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
 					quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
 				&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
diff --git a/pages/timeline/index.vue b/pages/timeline/index.vue
index 541bfa9c8..ce51321b0 100644
--- a/pages/timeline/index.vue
+++ b/pages/timeline/index.vue
@@ -65,7 +65,7 @@
                                 {{ slotProps.item.date }}
                             </template>
                             <template #content>
-                                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
+                                <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
                                 <p>
                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
                                     cupiditate neque quas!
diff --git a/pages/uikit/UIKit.vue b/pages/uikit/UIKit.vue
index b90615ce4..1821edfce 100644
--- a/pages/uikit/UIKit.vue
+++ b/pages/uikit/UIKit.vue
@@ -8,7 +8,7 @@
             <div class="card mb-5" style="border-radius: 50px">
                 <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
                     <div class="w-full md:w-6">
-                        <img alt="PrimeVue Designer" src="images/uikit/uikit-figma.png" class="w-full" />
+                        <img alt="PrimeVue Designer" src="/images/uikit/uikit-figma.png" class="w-full" />
                     </div>
                     <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
@@ -61,12 +61,12 @@
                         </ul>
                     </div>
                     <div class="w-full md:w-6">
-                        <img alt="PrimeVue Designer" src="images/uikit/uikit-system.png" class="w-full" />
+                        <img alt="PrimeVue Designer" src="/images/uikit/uikit-system.png" class="w-full" />
                     </div>
                 </div>
                 <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
                     <div class="w-full md:w-6">
-                        <img alt="PrimeVue Designer" src="images/uikit/uikit-themes.png" class="w-full" />
+                        <img alt="PrimeVue Designer" src="/images/uikit/uikit-themes.png" class="w-full" />
                     </div>
                     <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">DARK MODE</div>
@@ -94,7 +94,7 @@
                     style="border-radius: 50px"
                 >
                     <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
-                    <img alt="PrimeVue Designer" src="images/uikit/logo-figma-light.svg" class="w-4rem" />
+                    <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-light.svg" class="w-4rem" />
                 </a>
                 <a
                     href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
@@ -102,7 +102,7 @@
                     style="border-radius: 50px"
                 >
                     <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
-                    <img alt="PrimeVue Designer" src="images/uikit/logo-figma-dark.svg" class="w-4rem" />
+                    <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-dark.svg" class="w-4rem" />
                 </a>
             </div>
 
@@ -289,7 +289,7 @@ export default {
     },
     computed: {
         coverImage() {
-            return this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
+            return this.$appState.darkTheme ? '/images/uikit/primeone-cover-dark.jpeg' : '/images/uikit/primeone-cover-light.jpeg';
         }
     }
 };
diff --git a/public/demo/data/photos.json b/public/demo/data/photos.json
index 410dda36b..bbac63377 100644
--- a/public/demo/data/photos.json
+++ b/public/demo/data/photos.json
@@ -1,92 +1,92 @@
 {
     "data":[
         {
-            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }