chromeos/components/personalization_app/resources/trusted/local_images_element.html

<style include="trusted-style common-style">
  :host {
    overflow: hidden;
  }

  #main {
    height: 100%;
    overflow-y: auto;
    width: 100%;
  }
</style>
<div id="main" role="main" aria-label="[[i18n('myImagesLabel')]]">
  <iron-list
      items="[[imagesToDisplay_]]" grid role="listbox"
      aria-setsize$="[[imagesToDisplay_.length]]">
    <template>
      <div class="photo-container">
        <template is="dom-if"
            if="[[isImageLoading_(item, imageDataLoading_)]]">
          <div tabindex$="[[tabIndex]]" role="option"
              class="photo-loading-placeholder"
              style$="[[getLoadingPlaceholderAnimationDelay_(index)]]"
              aria-posinset$="[[getAriaIndex_(index)]]"
              aria-label$="[[i18n('ariaLabelLoading')]]"
              aria-disabled="true">
          </div>
        </template>
        <template is="dom-if" if="[[isImageReady_(item, imageData_, imageDataLoading_)]]">
          <div class="photo-inner-container" role="option"
              tabindex$="[[tabIndex]]" data-id$="[[getImageKey_(item)]]"
              on-click="onImageSelected_" on-keypress="onImageSelected_"
              aria-posinset$="[[getAriaIndex_(index)]]"
              aria-selected$="[[getAriaSelected_(item, currentSelected_, pendingSelected_)]]">
            <div class="photo-images-container">
              <img src="[[getImageData_(item, imageData_)]]"
                  alt="[[item.name]]">
              <iron-icon icon="personalization:checkmark"></iron-icon>
            </div>
          </div>
        </template>
      </div>
    </template>
  </iron-list>
</div>