diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d209797..9d74846 100755
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -105,6 +105,10 @@ module.exports = {
             text: '示例',
             link: '/zh/demo/image',
           },
+          {
+            text: 'Playground',
+            link: '/playground/',
+          },
         ],
         sidebar: {
           '/zh/demo/': [
diff --git a/docs/demo/full.md b/docs/demo/full.md
index efec6ad..7abb6a7 100644
--- a/docs/demo/full.md
+++ b/docs/demo/full.md
@@ -7,8 +7,8 @@
 ```vue
 <template>
   <vue-photo-zoom-pro
-    :url="$withBase('/image.jpg')"
-    :highUrl="$withBase('/image-high.jpg')"
+    url="/image.jpg"
+    highUrl="/image-high.jpg"
     :width="selectWidth"
     :height="selectHeight"
     @update="handleUpdate"
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import VuePhotoZoomPro from '../../../src/vue-photo-zoom-pro.vue'
+import VuePhotoZoomPro from 'vue-photo-zoom-pro'
 export default {
   components: {
     VuePhotoZoomPro,
@@ -35,4 +35,4 @@ export default {
   },
 }
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/demo/mini-map.md b/docs/demo/mini-map.md
index 0d3ea34..0728414 100644
--- a/docs/demo/mini-map.md
+++ b/docs/demo/mini-map.md
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import VuePhotoZoomPro from '../../../src/vue-photo-zoom-pro.vue'
+import VuePhotoZoomPro from 'vue-photo-zoom-pro'
 
 const getScrollInfo = () => {
   const { documentElement, body } = document
diff --git a/docs/zh/demo/full.md b/docs/zh/demo/full.md
index efec6ad..7abb6a7 100644
--- a/docs/zh/demo/full.md
+++ b/docs/zh/demo/full.md
@@ -7,8 +7,8 @@
 ```vue
 <template>
   <vue-photo-zoom-pro
-    :url="$withBase('/image.jpg')"
-    :highUrl="$withBase('/image-high.jpg')"
+    url="/image.jpg"
+    highUrl="/image-high.jpg"
     :width="selectWidth"
     :height="selectHeight"
     @update="handleUpdate"
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import VuePhotoZoomPro from '../../../src/vue-photo-zoom-pro.vue'
+import VuePhotoZoomPro from 'vue-photo-zoom-pro'
 export default {
   components: {
     VuePhotoZoomPro,
@@ -35,4 +35,4 @@ export default {
   },
 }
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/zh/demo/mini-map.md b/docs/zh/demo/mini-map.md
index 0d3ea34..0728414 100644
--- a/docs/zh/demo/mini-map.md
+++ b/docs/zh/demo/mini-map.md
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import VuePhotoZoomPro from '../../../src/vue-photo-zoom-pro.vue'
+import VuePhotoZoomPro from 'vue-photo-zoom-pro'
 
 const getScrollInfo = () => {
   const { documentElement, body } = document