1# Adding an Image 2 3Generally, the **[\<image>](../reference/arkui-js/js-components-basic-image.md)** 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 5 6 7To reference images via the **\<image>** component, you are advised to store the image files under **js\default\common**. (You need to create the **common** directory on your own.) For details about the directory structure, see [Directory Structure](../ui/js-framework-file.md#directory-structure). The following sample code shows you how to add an image and set its style. 8 9 10```html 11<!-- xxx.hml --> 12<image class="img" src="{{middleImage}}"></image> 13``` 14 15 16```css 17/* xxx.css */ 18.img { 19 margin-top: 30px; 20 margin-bottom: 30px; 21 height: 385px; 22} 23``` 24 25 26```js 27// xxx.js 28export default { 29 data: { 30 middleImage: '/common/ice.png', 31 }, 32} 33``` 34
