vite-shadcn 修改图片引用路径

Author: yluiop123

vite-shadcn/src/components/nav-user.tsx

@@ -58,7 +58,7 @@ export function NavUser() {
           )}
         >
           <Avatar className="h-8 w-8 rounded-lg grayscale">
-            <AvatarImage src="/orange.png" />
+            <AvatarImage src="orange.png" />
             <AvatarFallback className="rounded-lg">CN</AvatarFallback>
           </Avatar>
 

vite-shadcn/src/pages/component/display/avatar.tsx

@@ -7,11 +7,11 @@ export default function AvatarDemo() {
       <h2 className="text-xl font-bold">Basic Usage 基本用法</h2>
       <div className="flex gap-4">
         <Avatar>
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar>
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>RU</AvatarFallback>
         </Avatar>
         <Avatar>
@@ -23,19 +23,19 @@ export default function AvatarDemo() {
       <h2 className="text-xl font-bold">Sizes 大小</h2>
       <div className="flex items-center gap-4">
         <Avatar className="h-8 w-8">
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="h-12 w-12">
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="h-16 w-16">
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="h-24 w-24">
-          <AvatarImage src="/orange.png" />
+          <AvatarImage src="orange.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
       </div>
@@ -44,7 +44,7 @@ export default function AvatarDemo() {
       <div className="flex gap-4">
         <div className="relative">
           <Avatar>
-            <AvatarImage src="/orange.png" />
+            <AvatarImage src="orange.png" />
             <AvatarFallback>CN</AvatarFallback>
           </Avatar>
           <Badge className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-green-500">

vite-shadcn/src/pages/component/display/image.tsx

@@ -10,7 +10,7 @@ export default function ImageDemo() {
         <Card className="w-64">
           <CardHeader className="items-center">
             <Avatar className="size-24">
-              <AvatarImage src="/orange.png" alt="@shadcn" />
+              <AvatarImage src="orange.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
             </Avatar>
             <CardTitle>With Image</CardTitle>
@@ -43,27 +43,27 @@ export default function ImageDemo() {
       <h2 className="text-xl font-bold">Different Sizes 不同尺寸</h2>
       <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
         <Avatar className="size-10">
-          <AvatarImage src="/orange.png" alt="@shadcn" />
+          <AvatarImage src="orange.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="size-16">
-          <AvatarImage src="/orange.png" alt="@shadcn" />
+          <AvatarImage src="orange.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="size-24">
-          <AvatarImage src="/orange.png" alt="@shadcn" />
+          <AvatarImage src="orange.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="size-32">
-          <AvatarImage src="/orange.png" alt="@shadcn" />
+          <AvatarImage src="orange.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
       </div>
 
       <h2 className="text-xl font-bold">Avatar Groups 头像组合</h2>
       <div className="flex items-center -space-x-4 p-4 bg-gray-50 rounded-lg">
         <Avatar className="size-12 border-2 border-white">
-          <AvatarImage src="/orange.png" alt="@shadcn" />
+          <AvatarImage src="orange.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <Avatar className="size-12 border-2 border-white">
@@ -84,7 +84,7 @@ export default function ImageDemo() {
         <Card className="w-64">
           <CardHeader className="items-center">
             <Avatar className="size-24 rounded-md">
-              <AvatarImage src="/orange.png" alt="@shadcn" />
+              <AvatarImage src="orange.png" alt="@shadcn" />
               <AvatarFallback className="rounded-md">CN</AvatarFallback>
             </Avatar>
             <CardTitle>Rounded Medium</CardTitle>