Как использовать элемент изображения HTML5 в Карусели Bootstrap-Vue? - PullRequest
Новая
       19

Как использовать элемент изображения HTML5 в Карусели Bootstrap-Vue?

0 голосов
/ 23 апреля 2019

С Документация по Bootstrap Vue Carousel

Непонятно, как использовать элемент изображения HTML5, например: 

<picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture>

Здесь упоминается код для слота img: 

<!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <img
          slot="img"
          class="d-block img-fluid w-100"
          width="1024"
          height="480"
          src="https://picsum.photos/1024/480/?image=55"
          alt="image slot"
        >
      </b-carousel-slide>

Мне нужно поддерживать webp для тех браузеров, которые могут обрабатывать webp, или использовать JPEG для тех браузеров, которые не поддерживают webp.

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 24 апреля 2019

Элемент изображения заменяет элемент изображения следующим образом: 

<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
  <picture>
    <source srcset="img/awesomeWebPImage.webp" type="image/webp">
    <img src="img/creakyOldJPEG.jpg" alt="Alt Text!" slot="img" class="d-block img-fluid w-100" width="1024" height="480">
  </picture>
</b-carousel-slide>

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

...