页面上图片展示不完整
==========

#### 问题现象

加载应用内的图片时，图片显示不完整。

图一：完整显示。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/98/v3/71NbwiWuS0e5bLO4X7T31Q/zh-cn_image_0000002658972591.png?HW-CC-KV=V1&HW-CC-Date=20260709T134018Z&HW-CC-Expire=86400&HW-CC-Sign=A1CAC9FAD78CD8D78FD3622505080A8401DF030EF11CBFDC6924FA8613185B41 "点击放大")

图二：显示不完整。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ac/v3/5CRITqW2STerRo8t1TM6uQ/zh-cn_image_0000002658852639.png?HW-CC-KV=V1&HW-CC-Date=20260709T134018Z&HW-CC-Expire=86400&HW-CC-Sign=E7FE304D17E644DC682CAF891534082314D09F2D4A1882EAE66E16E036A6EA1E "点击放大")

#### 背景知识

*   [Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)为图片组件，常用于在应用中显示图片。
*   [objectFit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#objectfit)：设置图片的缩放类型。
*   [background-size](https://developer.huawei.com/consumer/cn/doc/quickApp-References/quickapp-common-styles-0000001170210009)可以通过设置背景尺寸来控制图片的缩放比例，以实现不同的背景填充效果。

#### 问题定位

1.  使用DevEco Testing查看问题组件，该组件为Image组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3f/v3/SJQ7OQA1TGSG38ctvfnjPw/zh-cn_image_0000002628773276.png?HW-CC-KV=V1&HW-CC-Date=20260709T134018Z&HW-CC-Expire=86400&HW-CC-Sign=78E68E24DBED9B5C3493B1588E72A0BF3282AB888215C6936394C3BAC6CCCA59 "点击放大")
    
2.  查看Image组件的objectFit属性是否正确，图片的缩放模式选用不当可能造成图片显示不完整，如果图片缩放模式设置为cover，图片会保持宽高比，并填满容器，超出部分会被裁剪。
    
    @Entry
    @Component
    struct ImgEmpty {
    
    
      build() {
        Stack() {
          Image($r('app.media.product')) _// $r('app.media.product')需要替换为开发者需要的图片资源文件_
            .width(300)
            .height(200)
            .objectFit(ImageFit.Cover) _// 图片保持宽高比并填满容器，超出部分会被裁剪_
        }
        .width('100%')
        .height('100%');
      }
    }
    

#### 分析结论

图片使用了不合适的缩放模式，造成超出容器的部分被裁剪，导致图片显示不完整。

#### 修改建议

objectFit属性设置为Contain，该缩放模式会保持宽高比，完整显示图片。

@Entry
@Component
struct ImgTruncation {
  build() {
    Stack() {
      Image($r('app.media.product')) _// $r('app.media.product')需要替换为开发者需要的图片资源文件_
        .width(300)
        .height(200)
        .objectFit(ImageFit.Contain) _// 保持宽高比，完整显示图片_
    }
    .width('100%')
    .height('100%');
  }
}