上一节我们讲了容器组件和文本组件，那么如果我们想往页面中添加一张图片怎么办呢？这就得用到Image组件了了。我们在上一节的文本组件下面输入Image($r('app.media.startIcon')，可以看到预览器页面中出现了一张图片，并且把我们的Text组件挤到上方去了：
Image组件通过小括号中的参数来获取我们想要呈现的图片，示例代码中的Image参数
$r('app.media.app_icon')表示读取的是工程项目的本地资源，媒体分类目录中的startIcon图片，我们可以从左侧的项目文件浏览器中找到它，路径为Entry/src/main/resources/base/media/startIcon.png：
细心的小伙伴也许会发现，跟base目录同级的目录中，还有两个目录en_US和zh_CN，跟base的结构是一样的，这是为了之后做应用国际化作准备的，我们目前无需过多关注。顺便一提，我们的代码文件都存放在跟resource目录同级的ets目录中，例如Index.ets文件的路径为Entry/src/main/ets/pages/Index.ets，可以从导航窗口中看到完整的路径信息：
通过选项卡切回到Index文件，我们调整Image组件的尺寸让图片能够完整地显示在页面中：
小伙伴们可以发现，我只设置了Image的宽度，但是图片的高度也跟着改变了。这是因为在默认情况下，Image组件的填充模式是ImageFit.Auto，会根据已有的尺寸信息自动设置图片在Image组件中的实际填充模式。我们可以通过.objectFit这个属性方法来指定Image组件的填充模式：
Image组件常用的填充模式：
- ImageFit.Contain 包含模式，图片保持原有比例，完全显示在Image组件中；
- ImageFit.Cover 封面模式，图片保持原有比例，铺满整个Image组件；
- ImageFit.Fill 填充模式，图片不保持原有比例，铺满整个Image组件；
- ImageFit.ScaleDown 仅缩小模式，图片保持原有比例，缩小或不改变尺寸，完全显示在Image组件中
- ImageFit.Auto 自动模式（默认），当仅设置了Image组件的宽度或高度时，实际为Contain模式，同时设置了Image组件的宽度和高度时，实际为Cover模式。
我们可以往项目资源中添加自己想要的图片，并把它呈现在Image组件中，从设备中找到一张本地图片，并复制到media目录下，改成易于识别的名字（后缀名无需更改），并将代码中的start_icon也改成对应的名字，我们就把自己想要的图片呈现在Image组件中了：
本地图片资源除了可以放到media目录下，还可以放到rawfile目录下，rawfile目录下的资源在应用打包后不会被加密，可以直接修改。读取rawfile目录下的资源，不再使用$r进行标识，而是直接把资源相对于main目录的相对路径（包含后缀名）作为参数：
Image组件除了可以使用项目中的图片资源，也可以使用网络图片链接。我们打开百度页面，在百度的Logo上点击右键，选择“复制图像链接”，传给Image作为参数后，页面上就出现了百度的logo：
（当网络图片加载过慢时，Image组件会显示空白，我们可以用.Alt()设置Image的占位图片资源，如：.Alt($r('app.media.start_icon'))
有没有觉得两张本地图片竖着摆放有点不太好看？我们可以用Row组件（行布局容器）把两个Image组件包起来，再按下保存快捷键（Ctrl+S），这两张图片就横向排列了：
感觉两张图片靠太近了？我们可以通过给Row组件传递配置参数的方法，调整row组件的子组件间距，让她们保持距离：
我们同样可以在API文档中查看组件都能接收哪些参数，参数名后面的问号表示该参数是可选的：
column组件同样支持space参数，我们在这个页面的根组件试试看：
既然百度的LOGO有了，不如再加个搜索功能？使用TextInput组件在页面中显示一个文本输入框：
再用Button组件给页面增加一个按钮，一个低仿版的百度搜索就做好了：
TextInput组件可以通过配置placeHolder参数，设置提示内容：
Button组件可以通过.type()属性方法设置外观样式：
Button组件一共有三种外观样式：
- ButtonType.Capsule：胶囊样式（默认）
- ButtonType.Circle：圆形样式
- ButtonType.Normal：普通样式
