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

作成日 2020.11.10
Alpine.js

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

1. 環境
2. Alpine.js導入
3. 画像を表示

環境

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

windows10にApacheのインストール

Alpine.js導入

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

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

画像を表示

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body class="sans-serif bg-gray-200">

    <div class="container mx-auto my-56 w-56 px-4">

        <div x-data="{
            alt: '150×150',
                src: 'https://placehold.jp/150x150.png',
                width: '150',
                height: '150'
            }">
            <figure>
                <img x-bind:width="width" x-bind:height="height" x-bind:src="src" x-bind:alt="alt" />
                
                <span x-text="alt"></span> 
                <a x-bind:href="src" x-text="src" class="text-purple-700 text-opacity-100"></a>
                
            </figure>
            
        </div>
    </div>
</body>

</html>

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

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

<img :width="width" :height="height" :src="src" :alt="alt" />
                
<span x-text="alt"></span> 
<a :href="src" x-text="src" class="text-purple-700 text-opacity-100"></a>