diff --git a/layouts/AppMenu.vue b/layouts/AppMenu.vue
index 15702b558..4d174d8aa 100755
--- a/layouts/AppMenu.vue
+++ b/layouts/AppMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['layout-sidebar', { active: active }]">
         <router-link to="/" class="logo">
-            <img :src="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+            <img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
         </router-link>
         <div class="layout-sidebar-filter p-fluid">
             <AutoComplete
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index db436508f..ab7e38bfb 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -4,7 +4,7 @@
             <i class="pi pi-bars"></i>
         </a>
         <div v-tooltip.bottom="$appState.theme" class="app-theme">
-            <img :src="$config.public.contextPath + 'images/themes/' + logoMap[$appState.theme]" />
+            <img :src="'https://primefaces.org/cdn/primevue/images/themes/' + logoMap[$appState.theme]" />
         </div>
         <ul ref="topbarMenu" class="topbar-menu">
             <li class="topbar-submenu">
@@ -32,138 +32,138 @@
 
                         <li class="topbar-submenu-header">BOOTSTRAP</li>
                         <li>
-                            <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + 'images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
+                            <a @click="changeTheme($event, 'md-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
+                            <a @click="changeTheme($event, 'md-light-deeppurple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
+                            <a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
+                            <a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
+                            <a @click="changeTheme($event, 'mdc-light-deeppurple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
+                            <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a>
+                            <a @click="changeTheme($event, 'tailwind-light')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
+                            <a @click="changeTheme($event, 'fluent-light')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
                         </li>
 
                         <li class="topbar-submenu-header flex align-items-center">PRIMEONE</li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
+                            <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-light-blue.png'" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
+                            <a @click="changeTheme($event, 'lara-light-blue')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-light-purple.png'" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
+                            <a @click="changeTheme($event, 'lara-light-purple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-light-teal.png'" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
+                            <a @click="changeTheme($event, 'lara-light-teal')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-dark-blue.png'" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-blue')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-dark-indigo.png'" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-dark-purple.png'" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-purple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-teal')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">MISC</li>
                         <li>
-                            <a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
+                            <a @click="changeTheme($event, 'soho-light')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
+                            <a @click="changeTheme($event, 'soho-dark', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
+                            <a @click="changeTheme($event, 'viva-light')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
+                            <a @click="changeTheme($event, 'viva-dark', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
+                            <a @click="changeTheme($event, 'mira')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
+                            <a @click="changeTheme($event, 'nano')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">PRIMEONE - LEGACY</li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
+                            <a @click="changeTheme($event, 'saga-blue')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-green')"><img :src="$config.public.contextPath + 'images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
+                            <a @click="changeTheme($event, 'saga-green')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-orange')"><img :src="$config.public.contextPath + 'images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
+                            <a @click="changeTheme($event, 'saga-orange')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-purple')"><img :src="$config.public.contextPath + 'images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
+                            <a @click="changeTheme($event, 'saga-purple')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-blue', true)"><img :src="$config.public.contextPath + 'images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
+                            <a @click="changeTheme($event, 'vela-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-green', true)"><img :src="$config.public.contextPath + 'images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
+                            <a @click="changeTheme($event, 'vela-green', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-orange', true)"><img :src="$config.public.contextPath + 'images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
+                            <a @click="changeTheme($event, 'vela-orange', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-purple', true)"><img :src="$config.public.contextPath + 'images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
+                            <a @click="changeTheme($event, 'vela-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-blue', true)"><img :src="$config.public.contextPath + 'images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
+                            <a @click="changeTheme($event, 'arya-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-green', true)"><img :src="$config.public.contextPath + 'images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
+                            <a @click="changeTheme($event, 'arya-green', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-orange', true)"><img :src="$config.public.contextPath + 'images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
+                            <a @click="changeTheme($event, 'arya-orange', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
+                            <a @click="changeTheme($event, 'arya-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
                         </li>
                     </ul>
                 </transition>
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index f8653b009..77aff9488 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -72,9 +72,9 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <Avatar :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
-                        <Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
-                        <Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
+                        <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
+                        <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
                     </div>
                 </div>
 
@@ -82,11 +82,11 @@
                     <div class="card">
                         <h5>Avatar Group</h5>
                         <AvatarGroup class="mb-3">
-                            <Avatar :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" size="large" shape="circle" />
-                            <Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" size="large" shape="circle" />
-                            <Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" size="large" shape="circle" />
-                            <Avatar :image="$config.public.contextPath + 'images/avatar/ionibowcher.png'" size="large" shape="circle" />
-                            <Avatar :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" size="large" shape="circle" />
+                            <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" size="large" shape="circle" />
+                            <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
+                            <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" size="large" shape="circle" />
+                            <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png'" size="large" shape="circle" />
+                            <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" size="large" shape="circle" />
                             <Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
@@ -95,7 +95,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
-                        <Avatar v-badge.danger="4" :image="$config.public.contextPath + 'images/organization/walter.jpg'" size="xlarge" />
+                        <Avatar v-badge.danger="4" :image="'https://primefaces.org/cdn/primevue/images/organization/walter.jpg'" size="xlarge" />
                     </div>
                 </div>
             </div>
diff --git a/pages/button/ButtonDoc.vue b/pages/button/ButtonDoc.vue
index baac8e5d7..236f9c228 100755
--- a/pages/button/ButtonDoc.vue
+++ b/pages/button/ButtonDoc.vue
@@ -136,11 +136,11 @@ import Button from 'primevue/button';
         <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
         <pre v-code><code>
 &lt;Button type="button" class="px-3"&gt;
-    &lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1.5rem"/&gt;
+    &lt;img alt="logo" src="/images/logo.svg" style="width: 1.5rem"/&gt;
 &lt;/Button&gt;
 
 &lt;Button type="button" class="p-button-outlined p-button-success"&gt;
-    &lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1.5rem" /&gt;
+    &lt;img alt="logo" src="/images/logo.svg" style="width: 1.5rem" /&gt;
     &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
 &lt;/Button&gt;
 
diff --git a/pages/card/CardDoc.vue b/pages/card/CardDoc.vue
index 1a1d11e2e..546ccfe3c 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="https://primefaces.org/cdn/primevue/images/usercard.png"&gt;
+        &lt;img alt="user header" src="/images/usercard.png"&gt;
     &lt;/template&gt;
     &lt;template #title&gt;
         Advanced Card
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index 514d8b81c..4f5f40efe 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -23,7 +23,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -50,7 +50,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -77,7 +77,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'https://primefaces.org/cdn/primevue/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/cascadeselect/CascadeSelectDoc.vue b/pages/cascadeselect/CascadeSelectDoc.vue
index 9091a841b..e4c9df20b 100644
--- a/pages/cascadeselect/CascadeSelectDoc.vue
+++ b/pages/cascadeselect/CascadeSelectDoc.vue
@@ -118,7 +118,7 @@ data() &#123;
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
     &lt;template #option="slotProps"&gt;
         &lt;div class="country-item"&gt;
-            &lt;img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
+            &lt;img src="/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
             &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
             &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
             &lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index 40b81d566..353f4fa46 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -33,18 +33,18 @@
 
                 <h5>Image</h5>
                 <div class="flex align-items-center">
-                    <Chip label="Amy Elsner" :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" />
-                    <Chip label="Asiya Javayant" :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" />
-                    <Chip label="Onyama Limba" :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" />
-                    <Chip label="Xuxue Feng" :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" removable />
+                    <Chip label="Amy Elsner" :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" />
+                    <Chip label="Asiya Javayant" :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" />
+                    <Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2" />
+                    <Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
-                    <Chip label="Xuxue Feng" :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" class="custom-chip" removable />
+                    <Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
                 </div>
             </div>
         </div>
diff --git a/pages/contextmenu/ContextMenuDoc.vue b/pages/contextmenu/ContextMenuDoc.vue
index 92ac314cd..aa55c82cc 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="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
+&lt;img alt="logo" src="/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
 &lt;ContextMenu ref="menu" :model="items" /&gt;
 
 </code></pre>
diff --git a/pages/datatable/Crud.vue b/pages/datatable/Crud.vue
index 4d64cbf2f..421de1c80 100755
--- a/pages/datatable/Crud.vue
+++ b/pages/datatable/Crud.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="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'https://primefaces.org/cdn/primevue/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">
diff --git a/pages/datatable/Filter.vue b/pages/datatable/Filter.vue
index d7924c7e6..2547ef666 100755
--- a/pages/datatable/Filter.vue
+++ b/pages/datatable/Filter.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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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/RowExpand.vue b/pages/datatable/RowExpand.vue
index 34ec46b6c..b2e000b12 100755
--- a/pages/datatable/RowExpand.vue
+++ b/pages/datatable/RowExpand.vue
@@ -21,7 +21,7 @@
                     <Column field="name" header="Name" sortable></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'https://primefaces.org/cdn/primevue/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/RowGroup.vue b/pages/datatable/RowGroup.vue
index e08735a09..9e5239f21 100755
--- a/pages/datatable/RowGroup.vue
+++ b/pages/datatable/RowGroup.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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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/Scroll.vue b/pages/datatable/Scroll.vue
index ddb1938d9..43ac9f254 100755
--- a/pages/datatable/Scroll.vue
+++ b/pages/datatable/Scroll.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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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/State.vue b/pages/datatable/State.vue
index ed94a3dfa..5014128c1 100755
--- a/pages/datatable/State.vue
+++ b/pages/datatable/State.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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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/Templating.vue b/pages/datatable/Templating.vue
index a12c0bae4..1f318002f 100755
--- a/pages/datatable/Templating.vue
+++ b/pages/datatable/Templating.vue
@@ -20,7 +20,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price">
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index 12727a961..e4f91c0ef 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -63,7 +63,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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -71,7 +71,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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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/dock/DockDoc.vue b/pages/dock/DockDoc.vue
index a382e9628..5a4e25b93 100644
--- a/pages/dock/DockDoc.vue
+++ b/pages/dock/DockDoc.vue
@@ -28,19 +28,19 @@ import Dock from 'primevue/dock';
                 items: [
                     {
                         label: "Finder",
-                        icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
+                        icon: "/images/dock/finder.svg"
                     },
                     {
                         label: "App Store",
-                        icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
+                        icon: "/images/dock/appstore.svg"
                     },
                     {
                         label: "Photos",
-                        icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
+                        icon: "/images/dock/photos.svg"
                     },
                     {
                         label: "Trash",
-                        icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png"
+                        icon: "/images/dock/trash.png"
                     }
                 ]
             }
diff --git a/pages/image/index.vue b/pages/image/index.vue
index bb820dc74..bbb1225c1 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -16,10 +16,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <Image :src="$config.public.contextPath + 'images/galleria/galleria1.jpg'" alt="Image" width="250" />
+                <Image :src="'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg'" alt="Image" width="250" />
 
                 <h5>Preview</h5>
-                <Image :src="$config.public.contextPath + 'images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
+                <Image :src="'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
             </div>
         </div>
 
diff --git a/pages/inplace/InplaceDoc.vue b/pages/inplace/InplaceDoc.vue
index 2d14b137a..18128c6d2 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="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" /&gt;
+        &lt;img src="/images/nature/nature1.jpg" /&gt;
     &lt;/template&gt;
 &lt;/Inplace&gt;
 
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index 2197242b4..1b19d85ea 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="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+                <img :src="'https://primefaces.org/cdn/primevue/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 27f53e1f5..735d1e554 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="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
+            <img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
         </span>
 
         <div class="flex align-items-center">
diff --git a/pages/overlaypanel/OverlayPanelDoc.vue b/pages/overlaypanel/OverlayPanelDoc.vue
index f865d1ab1..4c68c2517 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="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="/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="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
 
 </code></pre>
diff --git a/pages/rating/RatingDoc.vue b/pages/rating/RatingDoc.vue
index b29c24b6d..e1222833a 100755
--- a/pages/rating/RatingDoc.vue
+++ b/pages/rating/RatingDoc.vue
@@ -39,13 +39,13 @@ import Rating from 'primevue/rating';
         <pre v-code><code>
 &lt;Rating :modelValue="3">
     &lt;template #cancelicon&gt;
-        &lt;img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24"&gt;
+        &lt;img src="/images/rating/cancel.png" height="24" width="24"&gt;
     &lt;/template&gt;
     &lt;template #onicon&gt;
-        &lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24"&gt;
+        &lt;img src="/images/rating/custom-onicon.png" height="24" width="24"&gt;
     &lt;/template&gt;
     &lt;template #officon&gt;
-        &lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24"&gt;
+        &lt;img src="/images/rating/custom-officon.png" height="24" width="24"&gt;
     &lt;/template&gt;
 &lt;/Rating&gt;
 
diff --git a/pages/splitbutton/SplitButtonDoc.vue b/pages/splitbutton/SplitButtonDoc.vue
index fa584d580..30e7340ef 100755
--- a/pages/splitbutton/SplitButtonDoc.vue
+++ b/pages/splitbutton/SplitButtonDoc.vue
@@ -96,7 +96,7 @@ export default {
         <pre v-code><code>
 &lt;SplitButton :model="items" class="bg-primary border-round"&gt;
     &lt;Button @click="save"&gt;
-        &lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" /&gt;
+        &lt;img alt="logo" src="/images/logo.svg" style="width: 1rem" /&gt;
         &lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
     &lt;/Button&gt;
 &lt;/SplitButton&gt;