diff --git a/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java
index a958415834ebe1713182a90cdcf6a6a52e16165d..ad92e869bcf2dd7f06eebecafdb48b057d2f4d8f 100644
--- a/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java
+++ b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java
@@ -15,22 +15,30 @@
 
 package ohos.samples.jsfacard;
 
+import ohos.aafwk.ability.Ability;
 import ohos.aafwk.ability.FormBindingData;
 import ohos.aafwk.ability.FormException;
 import ohos.aafwk.ability.ProviderFormInfo;
 import ohos.aafwk.content.Intent;
-import ohos.ace.ability.AceAbility;
+import ohos.global.resource.NotExistException;
+import ohos.global.resource.Resource;
 import ohos.samples.jsfacard.utils.LogUtils;
 import ohos.utils.zson.ZSONObject;
 
+import java.io.ByteArrayOutputStream;
+import java.io.FileNotFoundException;
+import java.io.IOException;
+
 /**
  * Main ability
  *
  * @since 2021-08-20
  */
-public class MainAbility extends AceAbility {
+public class MainAbility extends Ability {
     private static final String TAG = MainAbility.class.getName();
 
+    private static final int CACHE_SIZE = 1024 * 20;
+
     private static final String STATUS = "status";
 
     private static final String PLAY = "play";
@@ -48,7 +56,41 @@ public class MainAbility extends AceAbility {
     @Override
     protected ProviderFormInfo onCreateForm(Intent intent) {
         LogUtils.info(TAG, "onCreateForm");
-        return super.onCreateForm(intent);
+        ProviderFormInfo providerFormInfo = new ProviderFormInfo();
+        try {
+            Resource resourceImageSrc = getResourceManager().getResource(ResourceTable.Media_ic_image);
+            Resource resourceBlueSrc = getResourceManager().getResource(ResourceTable.Media_ic_blue);
+            byte[] bytesImageSrc = imageConvertToByteArray(resourceImageSrc);
+            byte[] bytesBlueSrc = imageConvertToByteArray(resourceBlueSrc);
+            ZSONObject zsonObject = new ZSONObject();
+            zsonObject.put("imageSrc", "memory://ic_image.png");
+            zsonObject.put("imageBlueSrc", "memory://ic_blue.svg");
+            FormBindingData formBindingData = new FormBindingData(zsonObject);
+            formBindingData.addImageData("ic_image.png", bytesImageSrc);
+            formBindingData.addImageData("ic_blue.svg", bytesBlueSrc);
+            providerFormInfo.setJsBindingData(formBindingData);
+        } catch (IOException e) {
+            LogUtils.info(TAG, "IOException" + e.getMessage());
+        } catch (NotExistException e) {
+            LogUtils.info(TAG, "NotExistException" + e.getMessage());
+        }
+        return providerFormInfo;
+    }
+
+    private byte[] imageConvertToByteArray(Resource resource) {
+        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
+        byte[] bytes = new byte[CACHE_SIZE];
+        try {
+            int len = 0;
+            while (-1 != (len = resource.read(bytes))) {
+                byteArrayOutputStream.write(bytes, 0, len);
+            }
+        } catch (FileNotFoundException e) {
+            LogUtils.info(TAG, "FileNotFoundException" + e.getMessage());
+        } catch (IOException e) {
+            LogUtils.info(TAG, "IOException" + e.getMessage());
+        }
+        return byteArrayOutputStream.toByteArray();
     }
 
     @Override
diff --git a/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png b/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png
deleted file mode 100644
index b1cd3a18c1c2b2406580a4e0a9eebdaf1d0c951c..0000000000000000000000000000000000000000
Binary files a/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png and /dev/null differ
diff --git a/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml b/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml
index 5195841dfddc6a310cbceb79cb575b365572b8f2..76efa47644fa78f4849a60a8a74b2f8121f162fc 100644
--- a/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml
+++ b/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml
@@ -15,15 +15,16 @@
 
 <div class="container">
     <div class="main-div" onclick="activeEvent">
+        <image src="{{ imageSrc }}" class="main-image"></image>
         <div class="right-div">
             <text class="music-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.music') }}</text>
             <text class="singer-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.singer') }}
             </text>
             <div style="justify-content : space-between; margin : 0px 3.8%; padding-left : 10px; width : 100%;">
-                <image src="/common/ic_default_blue.svg" class="check-image"></image>
-                <image src="/common/ic_default_blue.svg" class="check-image"></image>
-                <image src="/common/ic_default_blue.svg" class="check-image"></image>
-                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="{{ imageBlueSrc }}" class="check-image"></image>
+                <image src="{{ imageBlueSrc }}" class="check-image"></image>
+                <image src="{{ imageBlueSrc }}" class="check-image"></image>
+                <image src="{{ imageBlueSrc }}" class="check-image"></image>
             </div>
         </div>
     </div>
@@ -31,11 +32,10 @@
         <text class="music-text">{{ $t('strings.music') }}</text>
         <text class="singer-text">{{ $t('strings.singer') }}</text>
         <div class="image-div">
-            <image src="/common/ic_default_blue.svg" class="check-image"></image>
-            <image src="/common/ic_default_blue.svg" class="check-image"></image>
-            <image src="/common/ic_default_blue.svg" class="check-image"></image>
-            <image src="/common/ic_default_blue.svg" class="check-image"></image>
-            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="{{ imageBlueSrc }}" class="check-image"></image>
+            <image src="{{ imageBlueSrc }}" class="check-image"></image>
+            <image src="{{ imageBlueSrc }}" class="check-image"></image>
+            <image src="{{ imageBlueSrc }}" class="check-image"></image>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/pages/index/index.json b/UI/JsFACard/entry/src/main/js/card/pages/index/index.json
index 69786201ed9dd37013d27b52935d1850e3959eb6..73306f9d1be1973475970971ef318ba899e22352 100644
--- a/UI/JsFACard/entry/src/main/js/card/pages/index/index.json
+++ b/UI/JsFACard/entry/src/main/js/card/pages/index/index.json
@@ -1,9 +1,11 @@
 {
   "data": {
+    "imageSrc": "",
+    "imageBlueSrc": ""
   },
   "actions": {
     "activeEvent": {
-      "action": "router",
+      "action": "message",
       "bundleName": "ohos.samples.jsfacard",
       "abilityName": "ohos.samples.jsfacard.MainAbility",
       "params": {
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json
index cf44ac53309b8d5b3e43847b13d51013a7c54c9a..d9421ac5eb3962743df770a9c3155b738b4c5ab6 100644
--- a/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json
@@ -2,7 +2,7 @@
   "data": {},
   "actions": {
     "activeEvent": {
-      "action": "router",
+      "action": "message",
       "bundleName": "ohos.samples.jsfacard",
       "abilityName": "ohos.samples.jsfacard.MainAbility",
       "params": {
diff --git a/UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg b/UI/JsFACard/entry/src/main/resources/base/media/ic_blue.svg
similarity index 100%
rename from UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg
rename to UI/JsFACard/entry/src/main/resources/base/media/ic_blue.svg
diff --git a/UI/JsFACard/entry/src/main/resources/base/media/ic_image.png b/UI/JsFACard/entry/src/main/resources/base/media/ic_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..872f8b8808cd8e60b9bf393e39ba5526e9db5b30
Binary files /dev/null and b/UI/JsFACard/entry/src/main/resources/base/media/ic_image.png differ