kintone アップした画像を表示するには？(初心者向け)

###はじめに
この記事はkintoneで添付ファイルフィールドに登録した写真を一覧画面に画像を表示したい、または詳細画面でスペースフィールドを使用して表示したいけど、どうしたらよいか分からない方向けです。

###どうやって表示するの？
表示手順は以下になります。
１、filekeyを取得
２、XMLHttpRequestでfilekeyを使用してAPIリクエストし、正式なURLを取得し、表示

・ステップ1、filekeyを取得

一覧画面なら「record[i].フィールドコード.vlaue.filekey」
詳細画面なら「record.フィールドコード.vlaue.filekey」で取得する。

参考URL
https://developer.cybozu.io/hc/ja/articles/202166180-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89

・ステップ2、XMLHttpRequestでfilekeyを使用してAPIリクエストし、画像を表示するための正式なURLを取得し、表示

以下がURLを取得し、表示するコード(例)です。

const apiurl = kintone.api.urlForGet('/k/v1/file', { fileKey: filekey }, true);

const xhr = new XMLHttpRequest();
xhr.open('GET', apiurl);
xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest');//これが無いとIE,FFがNG
xhr.responseType = "blob";

xhr.onload = function() {
  const blob = xhr.response;
  const url = window.URL || window.webkitURL;
  const image = url.createObjectURL(blob);
  $(`<img src=${image} width="120px" height="120px" /><br>`).appendTo(element);
xhr.send();

画像を使用してSwiper.jsでスライダーを実装することも可能です。
ただし、スライダーの実装にはPromiseの使用が必須になります。