Question

尚不清楚如何像这样使用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；对于不支持webp的浏览器，我需要使用JPEG。

我该如何解决这个问题？

Answer 1

图片元素替换图像元素，如下所示：

<!-- 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>

图片的使用方式是根据最合适的图片来确定要使用的图片。如果您支持哪种文件类型。图像的属性将应用于最终图像。

如何在Bootstrap-Vue轮播中使用HTML5图片元素？

1 个答案: