Adding an Image

Images are commonly implemented using the <image>component, whose usage is similar to that of the <text> component.

It is recommended that you place image resources in the js/default/common directory. Note that the common directory must be created manually. For details about directory structure, see Directory Structure. The sample code is as follows:

<!-- xxx.hml -->
<image class="img" src="{{middleImage}}"></image>

/* xxx.css */
.img {  
  margin-top: 30px;
  margin-bottom: 30px;
  height: 385px;
}

// xxx.js
export default {
  data: {
    middleImage: '/common/ice.png',
  },
}