Laravel - livewire で画像を切り替える

(2024-05-26)

今度は、画像を切り替えて閲覧します。

Livewireコンポーネントの作成

まず、Livewireコンポーネントを作成します。

php artisan make:livewire ImageSwitcher

app/Livewire/ImageSwitcher.php と resources/views/livewire/image-switcher.blade.php が作成されます。

それぞれを編集します。

<?php

namespace App\Livewire;
use Livewire\Component;

class ImageSwitcher extends Component
{
    public $currentImageIndex = 0;
    public $images = [];

    public function mount()
    {
        $this->loadImages();
    }

    public function loadImages()
    {
        $imageDirectory = public_path('images');
        $files = scandir($imageDirectory);
        $this->images = array_filter($files, function($file) use ($imageDirectory) {
            $filePath = $imageDirectory . DIRECTORY_SEPARATOR . $file;
            return is_file($filePath) && in_array(pathinfo($filePath, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']);
        });
        $this->images = array_values($this->images); // reindex array
    }

    public function previousImage()
    {
        if (!empty($this->images) && $this->currentImageIndex > 0) {
            $this->currentImageIndex--;
        }
    }

    public function nextImage()
    {
        if (!empty($this->images) && $this->currentImageIndex < count($this->images) - 1) {
            $this->currentImageIndex++;
        }
    }

    public function render()
    {
        return view('livewire.image-switcher', [
            'currentImage' => $this->images[$this->currentImageIndex] ?? '',
        ])->layout('layouts.base'); // Specify the layout
    }
}

resources/views/livewire/image-switcher.blade.php は、

<div class="text-center mt-8">
    <div class="inline-block w-1/3">

        @if (!empty($currentImage))
            <img src="{{ asset('images/' . $currentImage) }}" alt="Image">
        @else
            <p>No images found</p>
        @endif

    </div>
    <div>
        <button wire:click="previousImage" class="text-lg px-5 py-2 bg-blue-400 text-white rounded">◀</button>
        <button wire:click="nextImage" class="text-lg px-5 py-2 bg-blue-400 text-white rounded">▶</button>
    </div>
</div>

routes/web.php を編集します。

<?php

use App\Livewire\ItemList;
use App\Livewire\ItemCreate;
use Illuminate\Support\Facades\Route;
use App\Livewire\ImageSwitcher;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/item-create', ItemCreate::class)->name('item.create');
Route::get('/items-list', ItemList::class)->name('items.list');

Route::get('/image-switcher', ImageSwitcher::class)->name('imgchange');

welcome.blade.php を編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
    <title>Top Page</title>

</head>
<body>
    <h1 class="text-4xl bg-blue-50 border border-stone-400 px-5 py-2 m-3">Menu</h1>

    <ul class="list-disc leading-10 mx-10 px-5">
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('item.create') }}">投稿する</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('items.list') }}">データリスト</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('imgchange') }}">画像切り替え</a></li>
    </ul>
</body>
</html>

画像を用意

画像をいくつか用意して、public/images の中に入れます。

動作確認

矢印を押すと画像が入れ替わることが確認できました。

最初はマウススクロールで画像を入れ替えようとしたのですが、「Uncaught TypeError: Livewire.emit is not a function」が出てどうしても解決できませんでした。

tailwind が反映されない時

ビルドします。

cd ~/livewire-example
npm run build