Как правильно генерировать миниатюру изображения для Vue?

Question

[photosho]

Сайт на Nuxt 3 и Vue, серверная часть - на Laravel. Изображения хранятся на клиентской стороне (Vue).

Задача - выводить миниатюру изображения и отдельно - ссылку на полную версию (она будет открываться во всплывающем окне). Вариантов вывода несколько - плиткой (квадратные), два рядом и одно во всю ширину области компонента. Как удобнее подготавливать миниатюру?

1. При загрузке изображения. Генерировать одну или две для разных вариантов вывода.

2. При выводе. Например, в Bitrix есть функция "resizeImageGet", которая при первом вызове сжимает и обрезает изображение до указанных размеров, а при последующих - просто возвращает ссылку на уже сжатое, то есть, не обрабатывает повторно.

Как удобнее это делать в Vue, какие есть плагины для реализации? Возможно, это вообще делается на серверной стороне (Laravel)? В общем, буду благодарен за любую информацию.

Comments

[Вадим]

Изображения хранятся на клиентской стороне

Это как?

и отдельно - ссылку на полную версию

А куда ссылка то должна вести если изображение на клиенте?

[photosho]

Вадим, это значит, в папке "assets" там, где установлены Nuxt и Vue. А API часть (Laravel) установлена в другой папке - к ней идёт обращение из Vue для работы с базой данных.

[photosho]

Вадим, серверная часть (Laravel) на том же сервере, но установлена как отдельный сайт.

[Вадим]

photosho, так это совсем не на клиенте.. на клиенте - это у пользователя на пк\в браузере. Ну ладно, идём дальше.

Пользователь в риалтайме, без перезагрузки страницы может изменить вариант вывода(плиткой, две рядом, одну)? Какова вероятность что он будет это делать? Будет ли пользователь делать это больше одного раза за сессию?
Вот на основе этих гипотез и стоит выбрать подход.

В целом - конечно же стоит отдавать те картинки, которые оптимально подходят под текущее устройство и соответствующего размера\сжатия.

[Вадим]

Как удобнее это делать в Vue

Очень абстрактный вопрос.

[photosho]

Вадим, нет, в реальном времени ничего меняться не будет. Расположение картинок (и их размер) будет вычисляться при выводе, в зависимости от их количества.

Answer 1

[iljaGolubev]

Если предположить, что на самом деле Изображения хранятся на клиентской серверной стороне (Vue) (Laravel)., то становится более-менее понятно.

Обычный подход такой:
backend - (api) Laravel - методы для получения и сохранения данных.
frontend - (vue) Nuxt - отображение данных api и взаимодействие с api.

• Пользователь в браузере выбирает картинку для загрузки на сервер(средствами js её можно показать на странице до отправки (например)).
  
• Пользователь жмёт кнопку "сохранить" и frontend отправляет картинку в api (например)
  
• api сохраняет полученный файл
  
• api делает из сохранённого превью (например)
  
• api возвращает в браузер

  json {'img'=>full_image_url, 'tumb'=>tumb_image_url}

  
  
• frontend показывает

  <img src=tumb_image_url @click=showImage(full_image_url)>

  
  

---

Вариантов вывода несколько

Обычно это реализуется с помощью css. Но можно генерировать несколько разных превью на сервере.

"resizeImageGet", которая при первом вызове сжимает и обрезает изображение

Можно и так сделать. Тогда в api будет 2 метода uploadUmage - просто сохраняет файл, и resizeImageGet - проверяет что есть превью, создаёт его если нет и отдаёт контент (картинку). Но тогда это уже не чисто api.

Comments

[photosho]

Но сами картинки должны храниться на стороне API (Laravel)? То есть, браузер должен обращаться по тому адресу, где находится API, а не по тому, где находятся Nuxt + Vue?

[Алексей Уколов]

photosho, из первого не следует второе, на самом деле. Вы вполне можете на стороне Nuxt настроить проксирование картинок, чтобы не светить адрес API.

[photosho]

Алексей Уколов, тогда обрабатывать и создавать миниатюры тоже придётся там же? Интересует именно как это делать правильно.

[iljaGolubev]

photosho, для отображения картинки браузер должен обращаться по адресу картинки который api возвращает в json

[iljaGolubev]

photosho,

Интересует именно как это делать правильно.

потыкайте в ссылки в моём ответе. там есть инфа к размышлению