Vue.jsで画像のトリミング表示を行う「vue-object-fit」

vue-object-fitとは

vue-object-fitは、画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリです。

画像をSVGに取り込むため方式な為、メジャーなブラウザなら問題無く使用することが可能です。

【動画サイズ：1MB】

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue-object-fite

UMD

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-object-fit@1.0.6/dist/vue-object-fit.css">
<script src="https://cdn.jsdelivr.net/npm/vue-object-fit@1.0.6/dist/vue-object-fit.browser.js"></script>

gitリポジトリは以下から取得できます。

導入手順

step.1 ライブラリの取り込み

ES6等の場合

import 'vue-object-fit/dist/vue-object-fit.css'
import VueObjectFit from 'vue-object-fit/dist/vue-object-fit.common'

UMDの場合

const VueObjectFit = window['VueObjectFit'].default;

step.2 メソッドを設定

上記で取得したVueObjectFitをVue.useに取り込みます。

Vue.use(VueObjectFit);
new Vue({
  el: '#app', 
});

step.3 テンプレートを準備

各種コンポーネントを設置します。

サンプルはケバブケースで記載しています。

<div id="app">
  <object-fit-component
    url="https://loremflickr.com/1024/768/cat"
    width="100%"
    height="500px"
    :img-width="1024"
    :img-height="768"
    meet-or-slice="slice"
    align="xMidYMid"
    title="A lovely cat"
  ></object-fit-component>
</div>

サンプル

さいごに

画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリでした。
今後Googleでは、Core Web VitalをSEOに加味していくとの話があるので、このライブラリは有効な手になると思います。

今日はこの辺でー