[demo]Fix assets path

demo/src/routes/en_US/actionSheet/+page.svelte

@@ -28,16 +28,16 @@
 		{ content: 'Option three', style: 'Here is description information' },
 	];
 	const action3 = [
-		{ content: 'Fire girl', showImg: true, imgSrc: './assets/images/dota_火女.png', imgRadius: 'base' },
-		{ content: 'calf', showImg: true, imgSrc: './assets/images/dota_小牛.png', imgRadius: 'base' },
-		{ content: 'water man', showImg: true, imgSrc: './assets/images/dota_水人.png', imgRadius: 'base' },
+		{ content: 'Fire girl', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
+		{ content: 'calf', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
+		{ content: 'water man', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
 	];
 	const action4 = [
-		{ content: 'Apple', showImg: true, imgSrc: './assets/logos/apple.png', imgRadius: 'none' },
-		{ content: 'Google', showImg: true, imgSrc: './assets/logos/google.png', imgRadius: 'none' },
-		{ content: 'Microsoft', showImg: true, imgSrc: './assets/logos/microsoft.png', imgRadius: 'none' },
-		{ content: 'Adobe', showImg: true, imgSrc: './assets/logos/adobe.png', imgRadius: 'none' },
-		{ content: 'Figma', showImg: true, imgSrc: './assets/logos/figma.png', imgRadius: 'none' },
+		{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },
+		{ content: 'Google', showImg: true, imgSrc: '/assets/logos/google.png', imgRadius: 'none' },
+		{ content: 'Microsoft', showImg: true, imgSrc: '/assets/logos/microsoft.png', imgRadius: 'none' },
+		{ content: 'Adobe', showImg: true, imgSrc: '/assets/logos/adobe.png', imgRadius: 'none' },
+		{ content: 'Figma', showImg: true, imgSrc: '/assets/logos/figma.png', imgRadius: 'none' },
 	];
 
 	let toastVisible1 = false;

demo/src/routes/en_US/avatar/+page.svelte

@@ -25,26 +25,26 @@
 
 	<div class="font-bold">Different picture types and size</div>
 	<div class="flex justify-between mt-4 mb-8">
-		<Avatar image="./assets/images/avatar_2.png" imgSize="s" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" />
-		<Avatar image="./assets/images/avatar_2.png" />
-		<Avatar image="./assets/images/avatar_1.jpg" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="s" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" />
+		<Avatar image="/assets/images/avatar_2.png" />
+		<Avatar image="/assets/images/avatar_1.jpg" />
 	</div>
 
 	<div class="font-bold">Custom background color</div>
 	<div class="flex justify-between mt-4 mb-8">
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
 	</div>
 
 	<div class="font-bold">Different border</div>
 	<div class="flex justify-between mt-4 mb-8">
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dashed" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dotted" />
-		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dashed" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dotted" />
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
 	</div>
 
 	<div class="font-bold">Replace text</div>
@@ -66,16 +66,16 @@
 	<div class="flex justify-between">
 		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
 			<Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
-			<Avatar size="sm" image="./assets/images/avatar_1.jpg" />
+			<Avatar size="sm" image="/assets/images/avatar_1.jpg" />
 			<Avatar line="solid" />
-			<Avatar size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
+			<Avatar size="lg" image="/assets/images/avatar_2.png" imgSize="m" />
 			<Avatar size="xl" alt="A" altSize="xl" />
 		</div>
 		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
 			<Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
-			<Avatar radius="full" size="sm" image="./assets/images/avatar_1.jpg" />
+			<Avatar radius="full" size="sm" image="/assets/images/avatar_1.jpg" />
 			<Avatar radius="full" line="solid" />
-			<Avatar radius="full" size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
+			<Avatar radius="full" size="lg" image="/assets/images/avatar_2.png" imgSize="m" />
 			<Avatar radius="full" size="xl" alt="A" altSize="xl" />
 		</div>
 	</div>

demo/src/routes/en_US/badge/+page.svelte

@@ -117,10 +117,10 @@
 			<Avatar />
 		</Badge>
 		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
-			<Avatar image="./assets/images/avatar_1.jpg" />
+			<Avatar image="/assets/images/avatar_1.jpg" />
 		</Badge>
 		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
-			<Avatar radius="full" image="./assets/images/avatar_1.jpg" />
+			<Avatar radius="full" image="/assets/images/avatar_1.jpg" />
 		</Badge>
 	</div>
 </div>

demo/src/routes/en_US/checkbox/+page.svelte

@@ -163,7 +163,7 @@
 				checkeds={imgCheckeds}
 			>
 				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgCheckeds.includes(dota) ? 'ring-2 ring-primary dark:ring-dark' : ''}`}>
-					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
+					<img class="w-full h-full object-cover" src={`/assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
 				</div>
 			</Checkbox>
 		{/each}

demo/src/routes/en_US/grids/+page.svelte

@@ -220,8 +220,8 @@
 					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 				>
 					<div class="w-1/2 overflow-hidden">
-						<img class="block dark:hidden" src="./assets/stdf_512px.png" alt="" />
-						<img class="hidden dark:block" src="./assets/stdf_dark_512px.png" alt="" />
+						<img class="block dark:hidden" src="/assets/stdf_512px.png" alt="" />
+						<img class="hidden dark:block" src="/assets/stdf_dark_512px.png" alt="" />
 					</div>
 					<div>STDF</div>
 				</div>

demo/src/routes/en_US/radio/+page.svelte

@@ -81,7 +81,7 @@
 		{#each dotaImgs as dota, i}
 			<Radio name={dota} textPosition="t" icon={{ name: 'ri-arrow-up-s-line' }} iconChecked={{ name: 'ri-arrow-up-s-fill', size: 30 }}>
 				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgValue === dota && 'ring-2 ring-primary dark:ring-dark'}`}>
-					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
+					<img class="w-full h-full object-cover" src={`/assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
 				</div>
 			</Radio>
 		{/each}

demo/src/routes/en_US/steps/+page.svelte

@@ -142,10 +142,10 @@
 		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: '😴' } },
 	];
 	const steps8 = [
-		{ step: { title: 'Get up', bar: { type: 'image', image: './assets/images/avatar_2.png' } } },
+		{ step: { title: 'Get up', bar: { type: 'image', image: '/assets/images/avatar_2.png' } } },
 		{ step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
 		{ step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
-		{ step: { title: 'Beat beans', bar: { type: 'image', image: './assets/images/avatar_1.jpg' } } },
+		{ step: { title: 'Beat beans', bar: { type: 'image', image: '/assets/images/avatar_1.jpg' } } },
 		{ step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
 	];
 	const steps9 = [
@@ -269,7 +269,7 @@
 <div class="text-primary dark:text-dark text-sm">
     <div>Here you inject a picture as a component</div>
     <div class="rounded-full overflow-hidden h-20 w-20">
-        <img src="./assets/images/avatar_1.jpg" alt="" />
+        <img src="/assets/images/avatar_1.jpg" alt="" />
     </div>
 </div>
 -->
@@ -283,7 +283,7 @@
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>
 <div class="flex items-center justify-between">
     <Button size="full" heightIn="2" injClass="px-4">button</Button>
-    <Avatar image="./assets/images/avatar_1.jpg" size="sm" />
+    <Avatar image="/assets/images/avatar_1.jpg" size="sm" />
     <Icon name="ri-money-cny-circle-line" theme />
     <Icon name="ri-fingerprint-line" theme />
 </div> 

demo/src/routes/en_US/steps/injCom1_en.svelte

@@ -1,6 +1,6 @@
 <div class="text-primary dark:text-dark text-sm">
 	<div>Here you inject a picture as a component</div>
 	<div class="rounded-full overflow-hidden h-20 w-20">
-		<img src="./assets/images/avatar_1.jpg" alt="" />
+		<img src="/assets/images/avatar_1.jpg" alt="" />
 	</div>
 </div>

demo/src/routes/en_US/steps/injCom2_en.svelte

@@ -5,7 +5,7 @@
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>
 <div class="flex items-center justify-between">
 	<Button size="full" heightIn="2" injClass="px-4">button</Button>
-	<Avatar image="./assets/images/avatar_1.jpg" size="sm" />
+	<Avatar image="/assets/images/avatar_1.jpg" size="sm" />
 	<Icon name="ri-money-cny-circle-line" theme />
 	<Icon name="ri-fingerprint-line" theme />
 </div>

demo/src/routes/en_US/swiper/+page.svelte

@@ -4,15 +4,15 @@
 	import Item from './Item_en.svelte';
 
 	const data = [
-		{ type: 'img', url: './assets/images/wall_1.jpg' },
-		{ type: 'img', url: './assets/images/wall_2.jpg' },
-		{ type: 'img', url: './assets/images/wall_3.jpg' },
-		{ type: 'img', url: './assets/images/wall_4.jpg' },
+		{ type: 'img', url: '/assets/images/wall_1.jpg' },
+		{ type: 'img', url: '/assets/images/wall_2.jpg' },
+		{ type: 'img', url: '/assets/images/wall_3.jpg' },
+		{ type: 'img', url: '/assets/images/wall_4.jpg' },
 	];
 
 	const componentData = [
 		{ type: 'component', component: Item },
-		{ type: 'img', url: './assets/images/wall_1.jpg' },
+		{ type: 'img', url: '/assets/images/wall_1.jpg' },
 	];
 
 	let indexClick = -1;