Alpine.jsでx-bindを使用してデータをバインドして画像を表示する

Alpine.jsでx-bindを使用してデータをバインドして画像を表示する

JavaScriptフレームワークの1つであるAlpine.jsを導入して、x-bindを使用してデータをバインドして画像を表示するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105
  • Alpine.js 2.7.3

Alpine.js導入

CDNから読み込んで利用します。

画像を表示

「x-bind」ディレクティブを使用して、画像を表示するサンプルコードとなります。
CSSにtailwindを使用してます。

実行結果をみると、データがバインドされて画像が表示されていることが確認できます。

x-bindは以下のように、省略して記述することも可能です。