demo修改

entry/src/main/ets/pages/DownsamplingPage.ets

@@ -22,6 +22,12 @@ struct Index {
   @State w:number = 0
   @State BytesNumber1:number = 0
   @State BytesNumber2:number = 0
+  @State ImageKnifeOption1: ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+    placeholderSrc: $r('app.media.icon_loading'),
+    errorholderSrc: $r('app.media.icon_failed')
+  }
+
   transformSquare1(mUrl:Resource) {
     let imageKnifeOption:RequestOption  = new RequestOption();
     imageKnifeOption.load(mUrl)
@@ -66,26 +72,32 @@ struct Index {
           Button('png')
             .onClick(() => {
               this.transformSquare1(pngUrl);
+
             });
           Button('svg')
             .onClick(() => {
               this.transformSquare1(svgUrl);
+
             });
           Button('bmp')
             .onClick(() => {
               this.transformSquare1(bmpUrl);
+
             });
           Button('jpp')
             .onClick(() => {
               this.transformSquare1(jpgUrl);
+
             });
           Button('gif')
             .onClick(() => {
               this.transformSquare1(gifUrl);
+
             });
           Button('webp')
             .onClick(() => {
               this.transformSquare1(webpUrl);
+
             });
         }.margin({top:20,bottom:20})
         Text("原图字节大小："+this.BytesNumber1)
@@ -97,32 +109,65 @@ struct Index {
               .height(200)
               .margin({ top: 10 })
           }
+          Text('component用法')
+
         }.height(300).width('100%').backgroundColor(Color.Pink)
         Text('降采样图片')
         Flex(){
           Button('png')
             .onClick(() => {
               this.transformSquare2(pngUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: pngUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
             });
           Button('svg')
             .onClick(() => {
               this.transformSquare2(svgUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: svgUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
+
             });
           Button('bmp')
             .onClick(() => {
               this.transformSquare2(bmpUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: bmpUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
             });
           Button('jpp')
             .onClick(() => {
               this.transformSquare2(jpgUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: jpgUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
             });
           Button('gif')
             .onClick(() => {
               this.transformSquare2(gifUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: gifUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
             });
           Button('webp')
             .onClick(() => {
               this.transformSquare2(webpUrl);
+              this.ImageKnifeOption1 = {
+                loadSrc: webpUrl,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              }
             });
         }.margin({top:20,bottom:20})
 
@@ -136,6 +181,8 @@ struct Index {
               .height(200)
               .margin({ top: 10 })
           }
+          Text('component用法')
+          ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
         }.height(300).width('100%').backgroundColor(Color.Pink)
       }
     }