图片预览问题

vue/gold-system/src/views/index.vue

@@ -42,6 +42,10 @@ function logout() {
   ElMessage.success("退出成功");
 }
 
+const imgrule1 = '../src/assets/动漫美女.png';
+const list=[
+  '../src/assets/韩信.png'
+];
 // 挂载
 onMounted(async function () {
   // 获取用户信息
@@ -153,11 +157,7 @@ onMounted(async function () {
           >
             <el-sub-menu index="1" class="admin">
               <template #title>
-                <img
-                  style="width: 30px; height: 30px; border-radius: 50%"
-                  src="../assets/金币管理系统logo.png"
-                  alt="出错了"
-                />
+                <el-image :preview-src-list="list" preview-teleported="true" :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />
                 <span style="margin-left: 10px">{{ adminData.name }}</span>
               </template>
               <el-menu-item index="1-1">查看个人信息</el-menu-item>

vue/gold-system/src/views/recharge/adminRecharge.vue

@@ -352,7 +352,7 @@ onMounted(async function () {
                         <el-table-column prop="payWay" label="支付方式" width="100px" />
                         <el-table-column prop="rechargeVoucher" label="支付凭证" width="150px">
                             <template #default="scope">
-                                <el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" />
+                                <el-image :preview-src-list="[scope.row.rechargeVoucher]" preview-teleported="true" :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="name" label="提交人" width="100px" />

vue/gold-system/src/views/recharge/allRecharge.vue

@@ -322,7 +322,7 @@ onMounted(async function () {
                         <el-table-column prop="payWay" label="支付方式" width="100px" />
                         <el-table-column prop="rechargeVoucher" label="支付凭证" width="150px">
                             <template #default="scope">
-                                <el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" />
+                                <el-image :preview-src-list="[scope.row.rechargeVoucher]" preview-teleported="true" :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="name" label="提交人" width="100px" />

vue/gold-system/src/views/z.vue

@@ -59,11 +59,14 @@ onMounted(async function () {
     rechargeBar.setOption(option);
 })
 
+const imgrule = ref('..\assets\韩信.png');
 
 </script>
 
 <template>
-    <div>zzz</div>
+    <div>
+        <el-image :preview-src-list="[imgrule]" preview-teleported="true" src="..\assets\动漫美女.png" alt="美女" style="width: 50px; height: 50px" />
+    </div>
     <div id="main" style="width: 600px;height:400px;"></div>
 </template>