1# Adding an Image<a name="EN-US_TOPIC_0000001063590816"></a> 2 3Generally, the <image\> component is used to add images on a page. The method of using this component is similar to that of using the **<text\>** component. 4 5To reference images via the **<image\>** component, you must create the **common** directory under **js** \> **default**, and then store the image files in the **common** directory. The following sample code shows you how to add an image and set its style. 6 7``` 8<!-- xxx.hml --> 9<image class="img" src="{{middleImage}}"></image> 10``` 11 12``` 13/* xxx.css */ 14.img { 15 margin-top: 30px; 16 margin-bottom: 30px; 17 height: 385px; 18} 19``` 20 21``` 22// xxx.js 23export default { 24 data: { 25 middleImage: '/common/ice.png', 26 }, 27} 28``` 29 30
