Add an image
In all subsequent code demonstrations, we will omit non-essential codes such as the introduction of Lessjs resources. you can find it here, What is Lessjs.
Next, we start using spz-img to display an image.
<body>
<!-- ... -->
<spz-img
layout="responsive"
width="3000"
height="2003"
src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8.jpg"
alt="An bicycle"
></spz-img>
</body>In the above code, the layout attribute is required for every spz-* element, if not, an error will be reported. It gives elements a layout system, we can do different behaviors according to different layouts.
When layout value is responsive, the element takes the space available to its width and resizes its height automatically to the aspect ratio is given by the width and height attributes. The width and height attributes must be required.
The src is used to specify the path of the image, it can be an absolute URL or a local path, it is required.