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