开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。
Image通过调用接口来创建，接口调用形式如下：
该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源。
Image支持加载存档图、多媒体像素图两种类型。
存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64，分别介绍如下：
本地资源
创建文件夹，将本地图片放入ets文件夹下的任意位置。
Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。
使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。例如有如下资源：
调用方式：
另外，图片还可以放在rawfile文件夹下面，例如：
调用方式：
支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
b. 从媒体库获取的url格式通常如下:
路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。
Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。
PixelMap是图片解码后的像素图。以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，步骤如下：
step1: 创建PixelMap状态变量。
step2: 引用多媒体。
请求网络图片请求，解码编码PixelMap。
b. 填写网络图片地址，加载图片数据。
c. 将网络地址成功返回的数据，编码转码成pixelMap的图片格式。
d. 显示图片
Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。
svg格式的图片可以使用fillColor属性改变图片的绘制颜色。
给Image组件设置属性可以使图片显示更灵活，达到一些自定义的效果。以下是几个常用属性的使用示例。
👉🏻示例1: 设置图片缩放类型
通过objectFit属性使图片缩放到高度和宽度确定的框内。
👉🏻示例2: 图片插值
当原图分辨率较低并且放大显示时，图片会模糊出现锯齿。这时可以使用interpolation属性对图片进行插值，使图片显示得更清晰。
👉🏻示例3: 设置图片重复样式
通过objectRepeat属性设置图片的重复样式方式.
👉🏻示例4: 设置图片渲染模式
通过renderMode属性设置图片的渲染模式为原色或黑白（灰度图）
👉🏻示例5: 设置图片解码尺寸
通过sourceSize属性设置图片解码尺寸，降低图片的分辨率。
原图尺寸为1280*960，该示例将图片解码为150*150和400*400。
👉🏻示例6: 为图片添加滤镜效果
通过colorFilter修改图片的像素颜色，为图片添加滤镜。
👉🏻示例7: 同步加载图片
一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。但是特定情况下，图片刷新时会出现闪烁，这时可以使用syncLoad属性，使图片同步加载，从而避免出现闪烁。不建议图片加载较长时间时使用，会导致页面无法响应。
通过在Image组件上绑定onComplete事件，图片加载成功后可以获取图片的必要信息。如果图片加载失败，也可以通过绑定onError回调来获得结果。