feat

fashion-app/src/app/send-post/send-post.component.html

@@ -32,10 +32,13 @@
       [(ngModel)]="inputText" [autoGrow]="true"  
       placeholder="分享你的穿搭..." >
     </ion-textarea>
-  </div>
-
-
 
+    
+    <div class="image-box" *ngFor="let image of images; let i = index">
+      <img [src]="image" alt="Post Image" class="image">
+      <ion-icon name="close-circle-outline" class="delete-icon" (click)="removeImage(i)"></ion-icon>
+    </div>
+  </div>
 </ion-content>
 
 

fashion-app/src/app/send-post/send-post.component.scss

@@ -155,35 +155,30 @@
   margin-right: 5px;
 }
 
-
-.posts-container {
-  width: 100%; // 宽度占满父元素
+//图片边框
+.image-box {
+  position: relative; /* 使子元素绝对定位 */
+  width: 120px;
+  height: 120px;
+  border-radius: 3px;
+  margin-right: 10px;
+  float: left;
 }
 
-.post {
-  background-color: #f9f9f9; // 背景色
-  border: 1px solid #ddd; // 边框
-  border-radius: 8px; // 圆角
-  padding: 10px;
-  margin-bottom: 10px; // 帖子之间的间距
+.delete-icon {
+  position: absolute; /* 绝对定位 */
+  top: 5px; /* 距离顶部5px */
+  right: 5px; /* 距离右侧5px */
+  color: black; /* 设置图标颜色 */
+  font-size: 20px; /* 设置图标大小 */
+  cursor: pointer; /* 鼠标悬停时显示为指针 */
 }
 
-.post h3 {
-  margin: 0; // 去掉默认的 margin
-}
+image{
+  width: 100%; /* 图片宽度100% */
+  height: 100%; /* 图片高度100% */
+  object-fit: cover; /* 保持纵横比，填充整个容器 */
 
-.post p {
-  margin: 5px 0; // 设置段落的 margin
-}
 
-.image-gallery {
-  display: flex; // 使用 flexbox 来排列图片
-  flex-wrap: wrap; // 允许换行
 }
 
-.post-image {
-  width: 100px; // 设置图片的宽度
-  height: 100px; // 设置图片的高度
-  object-fit: cover; // 保持图片的比例
-  margin-right: 5px; // 图片之间的间距
-}

fashion-app/src/app/send-post/send-post.component.ts

@@ -5,12 +5,12 @@ import { Router } from '@angular/router';
 import {  NavController } from '@ionic/angular';
 import { IonButton, IonButtons,  IonContent, IonFooter, IonHeader, IonIcon, IonInput, IonItem,  IonTextarea,  IonTitle, IonToolbar,  } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { atOutline,  bookmarkOutline, chevronBackSharp, closeOutline, happyOutline, imageOutline, } from 'ionicons/icons';
+import { atOutline,  bookmarkOutline, chevronBackSharp, closeCircle, closeCircleOutline, closeOutline, happyOutline, imageOutline, } from 'ionicons/icons';
 import { CloudObject, CloudUser } from 'src/lib/ncloud';
 import { IonModal,  } from '@ionic/angular/standalone'; // 导入独立组件
 import { HwobsProvider } from './hwobs.service';
 
-addIcons({chevronBackSharp,imageOutline,atOutline,happyOutline,closeOutline,bookmarkOutline });
+addIcons({chevronBackSharp,imageOutline,atOutline,happyOutline,closeOutline,bookmarkOutline,closeCircleOutline });
 @Component({
   selector: 'app-send-post',
   templateUrl: './send-post.component.html',
@@ -174,4 +174,9 @@ addEmoji(emoji: string) {
  
 }
 
+//删除上传的图片
+removeImage(index: number) {//删除图片
+  this.images.splice(index, 1); // 从数组中删除指定索引的图片
+}
+
 }