# 页面中的图片资源无法正常显示

#### 问题现象

页面图片显示空白。

#### 背景知识

*   Image为图片组件，常用于在应用中显示图片。
*   alt属性可设置图片加载过程中显示的占位图。

#### 问题定位

1.  使用DevEco Testing查看问题组件，问题所在位置缺少Image组件，而正常显示图片组件的相同位置使用了Image组件。
    
2.  排查Image组件的设置，发现添加了判断图片资源是否存在的逻辑。
    
    ```
    @Entry
    @Component
    struct ImgEmpty {
      imgSrcs: ResourceStr[] = ['', $r('app.media.myposter2')];
    
      build() {
        Stack() {
          List() {
            ForEach(this.imgSrcs, (img: ResourceStr, index: number) => {
              ListItem() {
                Row() {
                  Text('图片' + (index + 1))
                    .fontSize(20)
                    .height('100%')
                    .width(100)
                    .textAlign(TextAlign.Center)
                    .borderRadius(10);
    
                  // 图片资源为空时不显示图片组件
                  if (img !== '') {
                    Image(img)
                      .width(150)
                      .objectFit(ImageFit.Contain);
                  }
                }
                .width('100%')
                .height(120)
                .justifyContent(FlexAlign.Start)
                .borderRadius(10)
                .backgroundColor('#f1f3f5');
              }
              .margin({ top: 5, bottom: 5 });
            }, (item: string) => item);
          }
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          .scrollBar(BarState.Off)
          .width('80%');
        }
        .width('100%')
        .height('100%');
      }
    }
    ```
    

#### 分析结论

该图片资源不存在，导致无法显示图片。

#### 修改建议

无图片资源时通过alt属性使用占位图片替代。

```
@Entry
@Component
struct ImgEmpty {
  imgSrcs: ResourceStr[] = ['', $r('app.media.startIcon')]; // $r('app.media.startIcon')需要替换为开发者需要的图片资源文件

  build() {
    Stack() {
      List() {
        ForEach(this.imgSrcs, (img: ResourceStr, index: number) => {
          ListItem() {
            Row() {
              Text('图片' + (index + 1))
                .fontSize(20)
                .height('100%')
                .width(100)
                .textAlign(TextAlign.Center)
                .borderRadius(10);

              Image(img)
                .width(100)
                // $r('app.media.empty')需要替换为开发者需要的图片资源文件
                .alt($r('app.media.empty')) // 图片资源为空时显示占位图片
                .objectFit(ImageFit.Contain);
            }
            .width('100%')
            .height(120)
            .justifyContent(FlexAlign.Start)
            .borderRadius(10)
            .backgroundColor('#f1f3f5');
          }
          .margin({ top: 5, bottom: 5 });
        }, (item: string) => item);
      }
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
      .scrollBar(BarState.Off)
      .width('80%');
    }
    .width('100%')
    .height('100%');
  }
}
```

效果图如下：