This component is used to display an image on the lock screen. You can specify the image path, blur radius, and other attributes. In addition, you can use common attributes to set the position, size, and rotation of the image.
Method 1: Use src to parse image resources.
<Image src="" srcid="" srcExp="" blur=""/>
Method 2: Use srcExp to parse image resources.
<Image srcExp="" blur=""/>
Parameter | Type | Mandatory | Description |
|---|---|---|---|
src | String | No | Relative path of an image file, for example, image.png or wenjianjia/image.png. Either src or srcExp is mandatory. You can customize an image path under the SD card that begins with ../../../../../sdcard, for example, ../../../../../sdcard/Pictures/123.png. The image must be in .png or .jpg format, with the size being less than 10 MB. |
blur | String | No | Blur radius. The value ranges from 0 to 24. A larger value indicates a higher blur degree. |
srcid | Number | No | Image sequence number, which is generally represented by a variable. Different images can be displayed based on the variable value. For example, if src and srcid are respectively set to pic.png and 1, the image pic_1.png is displayed. The value is a positive integer or numeric expression. |
srcExp | String | No | String expression from which the source address of an image can be parsed. If both src and srcExp are set, the value of src is used. |
Example 1: Display the yun_#id.png image at the position (120,500) in the upper left corner. Rotate the image in 50 degrees along both the X and Y axes at the rotation point whose coordinates are (110,80) relative to (120,500). In addition, design a position animation, a rotation animation, and a blur effect with a blur radius of 15 for the image.
<Image x="120" y="500" pivotX="110" pivotY="80" rotationX="50" rotationY="50" src="yun.png" blur="15" srcid="#id">
<PositionAnimation>
<Position x="0" y="0" time="0"/>
<Position x="3500" y="0" time="31000"/>
</PositionAnimation>
<RotationAnimation >
<Rotation angle="0" time="0"/>
<Rotation angle="360" time="60000"/>
</RotationAnimation>
</Image> Example 2: Display the image.png image at the position (100,100), and adjust the width and height to 100 pixels.
<Var name="image" expression="image.png" type="string"/> <Image x="100" y="100" w="100" h="100" srcExp="@image"/>