update figures

Signed-off-by: NHelloCrease <lian15@huawei.com>

en/application-dev/reference/arkui-js/js-components-basic-image.md

@@ -202,7 +202,7 @@ Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
 ```
 <!-- xxx.hml -->
 <div class="container">
-  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; ">
+  <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; ">
   </image>
   <select class="selects" onchange="change_fit">
     <option for="{{fits}}" value="{{$item}}">{{$item}}</option>
@@ -240,5 +240,5 @@ export default {
 }
 ```
 
-![](figures/gif.gif)
+![](figures/example.gif)
 

en/application-dev/reference/arkui-js/js-components-basic-text.md

@@ -339,11 +339,6 @@ Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
   width: 400px;
   height: 400px;
   border: 20px;
-  border-image-source: url("/common/images/landscape.jpg");
-  border-image-slice: 20px;
-  border-image-width: 30px;
-  border-image-outset: 10px;
-  border-image-repeat: round;
 }
 .title {
   font-size: 80px;

en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md

@@ -85,7 +85,6 @@ In addition to the attributes that are supported by  **CanvasRenderingContext2D*
     }
     ```
 
-    ![](figures/c3.png)
 
 
 ## Methods<a name="section47669296127"></a>

en/application-dev/ui/ui-js-animate-background-position-style.md

@@ -76,8 +76,5 @@ By changing the background-position attribute (where the first value is the posi
 ```
 
 
-![en-us_image_0000001267607873](figures/en-us_image_0000001267607873.gif)
-
-
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
 > The background-position attribute can only be used to move background images, but not the background color (background-color).

en/application-dev/ui/ui-js-components-images.md

@@ -62,84 +62,6 @@ image{
 ![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
 
 
-## Display Multiple Images
-
-  Define a for loop to display multiple images cyclically. Set option to specify the image scale style. For details about the scale styles, see the description of object-fit.
-
-```
-<!-- index.hml -->
-<div class="page-container">
-  <list>
-    <list-item class="item-container" for="{{list}}">
-      <image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
-      <div class="text-container">
-        <text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
-        <text style="font-size: 23px;color: orange;font-style: italic;">content</text>
-      </div>
-    </list-item>
-  </list>
-  <div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
-    <select id="slt2" style="border: 3px solid orange;color: orange;font-size: 40px;width:300px;height:160px;" onchange="setfit">
-      <option for="{{fit_list}}" value="{{$item}}" style="font-size: 36px;">{{$item}}</option>
-    </select>
-  </div>
-</div>
-```
-
-
-```
-/* xxx.css */
-.page-container {
-  flex-direction:column;
-  background-color:#F1F3F5;
-}
-.text-container {
-  width: 300px;
-  flex-direction: column;
-  justify-content: center;
-}
-.item-container {
-  flex-direction: row;
-  align-items: center;
-  justify-content:center;
-  margin-top:200px;
-}
-.testimage {
-  width: 175px;
-  height: 220px;
-  border: 5px solid #add8e6;
-  padding: 5px 5px 5px 5px;
-  margin: 5px 5px 5px 5px;
-}
-.testicon {
-  width: 50px;
-  height: 50px;
-  margin-left: 150px;
-  border-radius: 25px;
-  background-color: orange;
-}
-```
-
-
-```
-/* index.js */
-export default {
-  data: {
-    url:['common/images/bg-tv.jpg','common/images/img2.jpg'],
-    list:[0,1],
-    fit:'cover',
-    fit_list:['cover','contain','fill','none','scale-down']
-  },
-  setfit(e) {
-    this.fit = e.newValue
-  }
-}
-```
-
-
-![en-us_image_0000001267767873](figures/en-us_image_0000001267767873.gif)
-
-
 ## Loading Images
 
 When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.

en/application-dev/ui/ui-ts-building-data-model.md

@@ -13,7 +13,7 @@ On the created page, we use various items to describe food, such as food names,
 2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
    The eTS programming language is an extension of the TS language and also supports the TS syntax.
 
-     
+   
    ```
    enum Category  {
      Fruit,
@@ -50,31 +50,12 @@ On the created page, we use various items to describe food, such as food names,
    ```
 
 3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
-   ![en-us_image_0000001222967800](figures/en-us_image_0000001222967800.png)
-
+   
 4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
-   In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
-
-     
-   ```
-   const FoodComposition: any[] = [
-     { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
-     { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
-     { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
-     { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
-     { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
-     { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
-     { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
-     { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
-     { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
-     { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
-     { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
-     { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
-   ]
-   ```
+   In this example, you can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. 
 
 5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
-     
+  
    ```
    // FoodData.ets
    export enum Category {

zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md

@@ -75,9 +75,9 @@
 ```
 <!-- xxx.hml -->
 <div class="container">
-  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
+  <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
   </image>
-  &lt;select class="selects" onchange="change_fit"&gt;&lt;option for="{{fits}}" value="{{$item}}"&gt;{{$item}}&lt;/option&gt;&lt;/select&gt;
+  <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
 </div>
 ```
 
@@ -87,12 +87,11 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  
 }
 .selects{
   margin-top: 20px;
   width:300px;
-  border:1px solid \#808080;
+  border:1px solid #808080;
   border-radius: 10px;
 }
 ```

zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md

@@ -99,11 +99,6 @@
   width: 400px;
   height: 400px;
   border: 20px;
-  border-image-source: url("/common/images/landscape.jpg");
-  border-image-slice: 20px;
-  border-image-width: 30px;
-  border-image-outset: 10px;
-  border-image-repeat: round;
 }
 .title {
   font-size: 80px;

zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md

@@ -68,7 +68,7 @@
   }
   ```
 
-  ![zh-cn_image_0000001152773860](figures/zh-cn_image_0000001152773860.png)
+  
 
 
 ## 方法