init

xhs-mini-demos/component-case/image/image2/index.css

@@ -0,0 +1,9 @@
+.page-section-ctn {
+  text-align: center;
+}
+
+.image {
+  margin-top: 15px;
+  width: 345px;
+  height: 225px;
+}

xhs-mini-demos/component-case/image/image2/index.js

@@ -0,0 +1,13 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'image',
+      path: 'page/component/pages/image/image',
+    };
+  },
+  data: {
+    imageUrl: 'https://ci.xiaohongshu.com/83074709-0d05-4d1c-9d38-24a8e910d914',
+    webpImageURL:
+      'https://picasso-static.xiaohongshu.com/fe-platform/a30616b87ce2fcb1d9fd76a9e1b1e18d3b64aa53.webp',
+  },
+});

xhs-mini-demos/component-case/image/image2/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "image-index"
+}

xhs-mini-demos/component-case/image/image2/index.xhsml

@@ -0,0 +1,32 @@
+<view class="container">
+  <view class="page-head">
+    <view class="page-head-title">image</view>
+    <view class="page-head-line"></view>
+    <view xhs:if="{{desc}}" class="page-head-desc">{{desc}}</view>
+  </view>
+
+  <view class="page-body">
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">Local Image</view>
+      <view class="page-section-ctn">
+        <image class="image" src="../../resources/pic/1.jpg"/>
+      </view>
+    </view>
+    <view class="page-section page-section-gap">
+      <view class="page-section-title">Internet Image</view>
+      <view class="page-section-ctn">
+        <image class="image" src="{{imageUrl}}"/>
+      </view>
+    </view>
+     <view class="page-section page-section-gap">
+      <view class="page-section-title">Webp Image</view>
+      <view class="page-section-ctn">
+        <image class="image" webp src="{{webpImageURL}}" mode="aspectFit"/>
+      </view>
+    </view>
+  </view>
+
+  <navigator class="page-foot" openType="switchTab" url="/page/component/index" hover-class="none">
+    <image class="icon-foot" src="../../../../image/icon_foot.png"></image>
+  </navigator>
+</view>