Иногда, когда мы создаем форму с загрузкой изображения, может быть хорошей идеей предварительно просмотреть изображение перед его отправкой в ​​серверную часть или предварительно просмотреть изображение, которое уже загружено, при открытии формы для редактирования.

В этом руководстве я научу вас, как создать простой и многоразовый компонент Alpine.js для предварительного просмотра загружаемых изображений.

Предполагается, что у вас есть базовые знания о Alpine.js.

Чтобы облегчить процесс, я буду использовать фреймворк TailwindCSS для стилизации компонента, но не волнуйтесь, я использую только несколько простых стилей и объясню соответствующий CSS, который использую при необходимости.

Запуск компонента

Предполагая, что у нас уже есть HTML-страница с установленным Alpine.js, мы можем приступить к объявлению кода компонента:

Теперь мы можем добавить шаблон компонента в наш HTML:

Приведенный выше код проверяет, заполнено ли свойство imageUrl. Если это так, он покажет тег изображения. В противном случае вместо изображения появится маленькая серая рамка.

Обратите внимание, что мы использовали класс object-cover из TailwindCSS в нашем теге изображения. Он добавляет свойство CSS object-fit: cover;, чтобы изображение не теряло пропорции и не центрировалось на предварительном просмотре.

После этого мы можем увидеть что-то подобное при запуске нашего кода:

Предварительный просмотр изображения

Теперь давайте добавим код для предварительного просмотра изображения при выборе нового файла для загрузки.

Во-первых, мы обновим ввод файла для вызова метода fileChosen при выборе файла:

<input class="mt-2" type="file" accept="image/*" @change="fileChosen">

Затем мы можем реализовать этот метод в нашем компоненте:

Самый важный метод здесь - fileDataToUrl. Он отвечает за чтение данных файла и преобразование их в URL-адрес данных (представление файла изображения в формате base64).

Итак, внутри метода fileChosen мы можем получить этот результат URL-адрес данных и сохранить его в свойстве imageUrl.

Поскольку теги изображений принимают и адреса изображений, и представления данных в формате base64, мы можем использовать этот трюк для отображения нашего изображения перед его загрузкой.

Добавление адреса изображения по умолчанию

Теперь давайте внесем небольшое изменение в наш компонент, чтобы можно было определить путь / адрес изображения по умолчанию. Это поможет нам показывать уже загруженные изображения при открытии формы редактирования.

Для этого внесем в компонент следующие изменения:

function imageViewer(src = '') {
  return {
    imageUrl: src,
    ...
  }
}

Теперь мы можем передать адрес изображения вашему компоненту для инициализации с предварительно загруженным изображением:

<div x-data="imageViewer('heart.png')">
  ...
</div>

Заключение

С помощью этого простого и многоразового компонента Alpine.js вы можете добавить предварительный просмотр изображения в свои формы загрузки.

Я надеюсь, что этот урок будет вам полезен. Ваше здоровье!

Изначально это руководство было размещено здесь.

Следуйте за мной в Twitter, чтобы получить больше советов и руководств: @Tiago_Ferat