Laravel Livewireで画像プレビューを実装する方法

画像プレビュー機能は通常JavaScriptで10行ほどのコードを書かなければならないのですが、Laravel Livewireだとメソッドを記述するだけで実装できます。

実装方法と操作キャプチャ

Laravel Livewireのインストール作業は割愛させていただきます。

コード

画像プレビュー用imgタグのsrc属性にLivewireコンポーネントで定義したプロパティに続けてtemporaryUrl()メソッドを記述します。

画像はLivewireの非公開ディレクトリに一時的に保存され、プレビューできる仕組みとなっています。

https://readouble.com/livewire/2.x/ja/file-uploads.html

<div>
    @php($key = 'form.file')
    @if ($form['file'])
        <img class="h-[300px] object-fit mx-auto" src="{{ $form['file']->temporaryUrl() }}" alt="">  
    @else
        <input type="file" wire:model.defer="{{ $key }}" accept="image/*">
    @endif
</div>

<?php

namespace App\Http\Livewire\App\Image;

use Livewire\Component;
use Livewire\WithFileUploads;

class CreatePage extends Component
{
    use WithFileUploads;

    public array $form = [
        'file' => null,
    ];

    （略）
}