管理端相册图片被压缩

src/school/orchestra/compontent/photo-create.tsx

@@ -56,7 +56,7 @@ export default defineComponent({
       selectItem: {} as any,
       selectType: 'add',
       fileList: [] as any,
-      bucket: 'gyt',
+      bucket: 'gyt'
     })
 
     const onAddPhoto = async () => {
@@ -354,13 +354,14 @@ export default defineComponent({
                       }}
                     ></i>
 
-                    {item.coverUrl ? (
-                      <Image class={styles.img} src={item.coverUrl} fit="cover" />
-                    ) : (
-                      <div class={[styles.img, styles.default]}>
-                        <Image src={iconPhoneDefaut} class={styles.defaultImg} />
-                      </div>
-                    )}
+                    <div
+                      class={styles.img}
+                      style={
+                        item.coverUrl
+                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                          : ''
+                      }
+                    ></div>
 
                     <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
                     <p class={styles.num}>{item.photoCount}张</p>

src/school/orchestra/compontent/photo-detail.module.less

@@ -25,11 +25,18 @@
       margin-top: 12px;
       position: relative;
       .img {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 170px;
         height: 170px;
         border-radius: 10px;
         overflow: hidden;
         position: relative;
+        background-color: #eaeaea;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url('../images/icon-photo-default.png');
       }
     }
 

src/school/orchestra/compontent/photo-detail.tsx

@@ -334,13 +334,20 @@ export default defineComponent({
                       )
                     }}
                   />
-                  <Image class={styles.img} src={item.fileUrl} fit="cover" />
+                  <div
+                    class={styles.img}
+                    style={
+                      item.fileUrl
+                        ? { backgroundImage: `url(${item.fileUrl})`, backgroundSize: 'cover' }
+                        : ''
+                    }
+                  ></div>
                 </div>
               ))}
             </CheckboxGroup>
           </List>
         ) : (
-          <OEmpty btnStatus={false} tips="暂无相片" />
+          <OEmpty btnStatus={false} tips="暂无照片" />
         )}
 
         {state.isEdit && (

src/school/orchestra/compontent/photo.module.less

@@ -8,10 +8,10 @@
   border-radius: 10px;
   font-size: 16px;
 }
-.btnGroup{
+.btnGroup {
   display: flex;
   padding: 12px;
-  .addPhone{
+  .addPhone {
     margin: 0 8px;
   }
 }
@@ -35,19 +35,18 @@
       z-index: 9;
     }
     .img {
-      width: 170px;
-      height: 170px;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .default {
       display: flex;
       align-items: center;
       justify-content: center;
       background: #eaeaea;
-      .defaultImg {
-        width: 45px;
-      }
+      width: 170px;
+      height: 170px;
+      border-radius: 10px;
+      overflow: hidden;
+      background-color: #eaeaea;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url('../images/icon-photo-default.png');
     }
     .name {
       padding: 6px 0 4px;
@@ -91,11 +90,11 @@
 .photos {
   padding: 0 16px 16px;
 }
-:global{
-  .van-image-preview{
+:global {
+  .van-image-preview {
     .van-image-preview__close-icon,
-    .van-image-preview__index{
-      top: 50px
+    .van-image-preview__index {
+      top: 50px;
     }
   }
-}
+}

src/school/orchestra/compontent/photo.tsx

@@ -228,13 +228,14 @@ export default defineComponent({
                     }}
                   ></i>
 
-                  {item.coverUrl ? (
-                    <Image class={styles.img} src={item.coverUrl} fit="cover" />
-                  ) : (
-                    <div class={[styles.img, styles.default]}>
-                      <Image src={iconPhoneDefaut} class={styles.defaultImg} />
-                    </div>
-                  )}
+                  <div
+                    class={styles.img}
+                    style={
+                      item.coverUrl
+                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                        : ''
+                    }
+                  ></div>
 
                   <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
                   <p class={styles.num}>{item.photoCount}张</p>