Bootstrap-Table内画像リンク切れ魔貫光殺砲（蜃気楼編）

概要

• Bootstrap-Table を利用したテーブルに表示している画像のリンク切れ(蜃気楼)を検知し、デフォルト画像（No image）に差し替える（魔貫光殺砲）スマートな方法

方法

• Bootstrap Table の data-events を利用する
  • https://bootstrap-table.com/docs/api/column-options/#events

サンプル

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
      <th data-field="image" data-formatter="imageFormatter" data-events="imageEvents">Image</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table');

  function imageFormatter(value, row, index) {
    const image_url = index % 2 === 0 ? 'https://placehold.jp/3d4070/ffffff/150x150.png?text=TEST' : 'https://example.com/example.png';
    return ['<img class="img-' + index + '" src="' + image_url + '">'].join('');
  }

  window.imageEvents = {
    'error img': function (e, value, row, index) {
      $('.img-' + index).attr('src', 'https://placehold.jp/a3a3a3/ffffff/150x150.png?text=NO IMAGE');
    }
  }
</script>