Как изменить размер изображения при изменения окна браузера в vue?

Question

[Сергей Бурдужа]

Добрый день.
Создаю тестовое приложение.
Вставил слайдер.

<splide class="cards" :options="options">
      <splide-slide class="card" v-for="{id, title, imgSrc} in ads" :key="id">
        <h2 class="card__title">
          <router-link :to="'/ad/:'+id">{{ title }}</router-link>
        </h2>
        <img :src="imgSrc" :alt="title">
      </splide-slide>
    </splide>

Сейчас изображение имеет размер 1920x900.
Можно как-то задать размер изображения по умолчанию, и если я вставлю ссылку на изображение которое будет больше или меньше, vue автоматически задаст размер, который по дефолту. И когда в коде открою картину в новой вкладке в браузере, он будет иметь размер по-дефолту.

Я работаю еще с worpdress, там есть классный плагин kama_thumbnail, который имеет такие возможности. Потом, допустим на мобильном, я проверяю, если окно браузера меньше 576, то тогда я показываю другое изображение с другими размерами.

Типа того:

<img class="home-intro__img img-responsive img--desktop" src="<?php echo kama_thumb_src('w=1920 &h=991 &attach_id=' . $home_intro["immagine"] . ''); ?> " alt="">
        <img class="home-intro__img img-responsive img--mobile" src="<?php echo kama_thumb_src('w=400 &h=406 &attach_id=' . $home_intro["immagine"] . ''); ?> " alt="">

Заранее благодарен за помощь.

Answer 1

[Вадим]

Идеальный путь:
Для случая, когда у Вас уже есть все необходимые размеры изображений:
picture

Если их нет, то на фронте ресайзить картинки не надо.
У вас на бэке должен быть ресайзер картинок, который по урлу отдаёт картинку определённого размера.
Например: https://mySite/assets/img/640/480/picture.png - возвращает картинку с оригинальным размером 640х480.
А на фронте, во vue в Вашем случае, Вам тогда просто нужно будет написать миксин или компонент картинки, в который нужно будет передавать размеры картинки и её название, и чтобы возвращался либо корректный путь до картинки, если это метод миксина, либо картинка с правильным урлом.
И в конечном итоге это опять же нас возвращает к picture.

Нормальный путь(Если Вы занимаетесь оптимизацией графики):
Пользуйтесь CSS media - на брэйкпоинтах меняйте картинке ширину и высоты.

Плохой путь:
Вешайтесь на ресайз окна и подменяйте атрибуты ширины и высоты для картинки.

Comments

[Сергей Бурдужа]

Спасибо вам огромное.