图片

使用属性对图像（通过 <b-img> 组件）进行优化以实现响应式行为（因此它们永远不会比其父元素更大），还可以为其添加轻量级样式 — 所有这些都通过属性实现。

BootstrapVue 的图像组件支持圆角图像、缩略图样式、对齐，甚至能够创建具有可选纯色背景的空白图像。可通过免费组件 <b-img-lazy> 提供对延迟加载图像的支持。

图像 src 解析

开箱即用的 src 属性（以及 <b-img-lazy> 的 blank-src 属性）仅适用于绝对 URL 或完全限定域名 URL。如果您使用项目资产作为图像源，请参阅组件 img src 解析，以配置 vue-loader，以便了解指定图像源的自定义组件属性。

图像样式

有几个属性可用于设置呈现的图像元素的样式。以下小节介绍了各种选项。

响应式图像

BootstrapVue 中的图像可以使用 fluid 属性（通过 CSS 类设置 max-width: 100%; height: auto;）使其具有响应性，以便它随父元素缩放，直至图像的最大本机宽度。

<div>
  <b-img src="https://picsum.photos/1024/400/?image=41" fluid alt="Responsive image"></b-img>
</div>

<!-- b-img-fluid.vue -->

要制作一个流体图像，使其增长以填充其容器的宽度，请使用 fluid-grow 属性。请注意，这可能会导致小位图图像模糊。

<div>
  <h5>Small image with <code>fluid</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>

  <h5 class="my-3">Small image with <code>fluid-grow</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid-grow alt="Fluid-grow image"></b-img>
</div>

<!-- b-img-fluid-grow.vue -->

使用 block 属性强制图像显示为块元素，而不是浏览器的默认内联块元素。

注意：在 Internet Explorer 10 中，带有 fluid 的 SVG 图像大小不成比例。要解决此问题，请在必要时添加样式 width: 100% \9;。此修复程序对其他图像格式的大小设置不当，因此 Bootstrap v4 不会自动应用它。

图像缩略图

您可以使用属性 thumbnail 为图像赋予圆角浅色边框外观。

<b-container fluid class="p-4 bg-dark">
  <b-row>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Image 1"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 2"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Image 3"></b-img>
    </b-col>
  </b-row>
</b-container>

<!-- b-img-thumbnail.vue -->

圆角

您可以通过将 rounded 属性设置为以下值之一来控制要圆角的角

true（或属性存在且没有值）：圆角所有角
false（或属性不存在）：无明确圆角或角（默认）
'top'：圆角顶部角
'right'：圆角右角
'bottom'：圆角下角
'left'：圆角左角
'circle'：生成一个圆形（如果图片是正方形）或椭圆形（如果图片不是正方形）边框
'0'：明确关闭圆角

<template>
  <div>
    <b-img v-bind="mainProps" rounded alt="Rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="top" alt="Top-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="right" alt="Right-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="bottom" alt="Bottom-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="left" alt="Left-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="circle" alt="Circle image"></b-img>
    <b-img v-bind="mainProps" rounded="0" alt="Not rounded image"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, blankColor: '#777', width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-rounded.vue -->

对齐图片

使用布尔属性 left（左浮动）、right（右浮动）和 center（自动左右边距）对齐图片。您还可以将图片放置在具有 text-center 类的容器中，以使其居中。

左对齐和右对齐（浮动）

<div class="clearfix">
  <b-img left src="https://picsum.photos/125/125/?image=58" alt="Left image"></b-img>
  <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
</div>

<!-- b-img-left-right.vue -->

居中对齐（块）

<div>
  <b-img center src="https://picsum.photos/125/125/?image=58" alt="Center image"></b-img>
</div>

<!-- b-img-center.vue -->

注意：left 优先于 right，而后者优先于 center。

空白（或纯色）图片

<b-img> 提供内置支持，用于通过设置 blank 属性并指定 width 和 height 值（以像素为单位）来生成任意宽度和高度的空白图片（默认情况下为透明）。您可以应用任何其他 <b-img> 属性来更改生成图片的样式/行为。

使用 blank-color 属性设置空白图片颜色。blank-color 属性可以接受任何 CSS 颜色值

命名颜色 — 即 orange 或 blue
十六进制颜色 — 即 #FF9E2C
RGB 和 RGBa 颜色 — 即 rgb(255, 158, 44) 和 rgba(255, 158, 44, .5)
HSL 和 HSLa 颜色 — 即 hsl(32, 100%, 59%) 和 hsla(32, 100%, 59%, .5)

默认 blank-color 为 transparent。

<template>
  <div>
    <b-img v-bind="mainProps" alt="Transparent image"></b-img>
    <b-img v-bind="mainProps" blank-color="#777" alt="HEX shorthand color image (#777)"></b-img>
    <b-img v-bind="mainProps" blank-color="red" alt="Named color image (red)"></b-img>
    <b-img v-bind="mainProps" blank-color="black" alt="Named color image (black)"></b-img>
    <b-img v-bind="mainProps" blank-color="#338833" alt="HEX color image"></b-img>
    <b-img v-bind="mainProps" blank-color="rgba(128, 255, 255, 0.5)" alt="RGBa color image"></b-img>
    <b-img v-bind="mainProps" blank-color="#88f" alt="HEX shorthand color (#88f)"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-blank.vue -->

注释

在空白图片模式下，如果仅设置了宽度或高度之一，则图片的宽度和高度都将设置为相同的值。
在空白图像模式下，如果没有设置宽度和高度，则宽度和高度都将内部设置为 1。
blank 属性优先于 src 属性。如果您同时设置了这两个属性，然后将 blank 设置为 false，则将显示 src 中指定的图像。
空白图像使用 SVG 图像数据 URL 呈现。
width 和 height 属性还将应用 width 和 height 属性到呈现的 <img> 标记，即使没有设置 blank。

`srcset` 支持

<b-img> 支持图像上的 srcset 和 sizes 属性。这些属性接受字符串值或字符串数组（字符串数组将转换为由逗号分隔的单个字符串）。

有关这些属性的用法详细信息，请参阅 MDN 的自适应图像指南。

注释

如果设置了 blank 属性，则将忽略 srcset 和 sizes 属性
IE 11 不支持 srcset 和 sizes，因此请确保您为 src 属性设置了一个值
Vue-loader 不支持 srcset 属性上的项目相对 URL（资产 URL）。相反，使用 require(...) 解析各个 URL 路径。请注意，不要创建数据 URI 字符串，其长度超过浏览器支持的最大属性值长度。如果您的 webpack 配置对 url-loader 有限制，并且您想防止内联数据 URL，则可能必须覆盖加载器限制： require('!!url-loader?limit=0!./assets/photo.jpg')
对 srcset 和 sizes 的支持已添加到版本 2.1.0 中

延迟加载的图像

使用我们配套的 <b-img-lazy> 图像组件（基于 <b-img>）在图像滚动到视图中（或在视口的 offset 像素内）时延迟加载图像。

延迟加载图像使用 IntersectionObserver（如果浏览器支持，或通过多态填充）来检测何时应显示图像。如果未检测到 IntersectionObserver 支持，则始终会显示图像。

用法

将 src 属性设置为要延迟加载的图像的 URL，并通过属性 blank-src 指定占位符图像 URL，或通过将 blank-src 留为空 null 为您生成空白占位符图像。

通过 blank-width 和 blank-height 属性指定占位符的宽度和高度。如果未设置这些属性，则它们将回退到 width 和 height 属性（应用于通过 src 指定的图像）。

通过设置属性 blank-color 来控制生成的空白图像颜色。

占位符图像（显式提供或动态生成）应与 src 图像具有相同的宽度和高度值，或至少具有相同的宽高比。

随意使用 fluid、fluid-grow、thumbnail 和 rounded 属性 <b-img>。

offset 属性指定图像需要接近视口的像素数才能触发显示。默认值为 360。

throttle 属性控制在 scroll（或 resize、orientationchange 或 transitionend）事件发生后多长时间（以毫秒为单位）检查图像是否已进入视图（或在 offset 的视图内）。默认值为 100（毫秒）。如果检测到 IntersectionObserver 支持，throttle 无效。

一旦图像进入视图并显示，事件侦听器和/或 Intersection Observer 将被移除。

示例用法

<template>
  <div>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(82)" alt="Image 2"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(84)" alt="Image 3"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(85)" alt="Image 4"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(88)" alt="Image 5"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(90)" alt="Image 6"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(92)" alt="Image 7"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(94)" alt="Image 8"></b-img-lazy>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: {
          center: true,
          fluidGrow: true,
          blank: true,
          blankColor: '#bbb',
          width: 600,
          height: 400,
          class: 'my-5'
        }
      }
    },
    methods: {
      getImageUrl(imageId) {
        const { width, height } = this.mainProps
        return `https://picsum.photos/${width}/${height}/?image=${imageId}`
      }
    }
  }
</script>

<!-- b-img-lazy.vue -->

强制显示延迟加载的图像

要强制显示最终图像，请将 show 属性设置为 true。 show 属性支持 Vue .sync 修饰符，并且当最终图像显示时将更新为 true。

延迟加载 `srcset` 支持

<b-img-lazy> 支持在渲染的 <img> 元素上设置 srcset 和 sizes 属性。这些属性仅在图像进入视图后才应用于图像。

有关属性使用详细信息和限制，请参见上面的 srcset 支持。

在版本 2.1.0 中添加了对 srcset 和 sizes 的支持。

组件参考

`<b-img>`

函数组件

查看源代码

<b-img> 属性

属性

所有属性默认值都可全局配置。

属性 (点击按升序排列)	类型 (点击按升序排列)	默认值	描述
`alt`	`字符串`		为 `alt` 属性设置的值
`blank`	`布尔值`	`false`	通过 SVG 数据 URI 创建一个空白/透明图像
`blank-color`	`字符串`	`'transparent'`	将空白图像的颜色设置为指定的 CSS 颜色值
`block`	`布尔值`	`false`	强制图像显示为块元素，而不是浏览器的默认内联块元素
`center`	`布尔值`	`false`	水平居中图像
`fluid`	`布尔值`	`false`	使图像响应。图像会根据需要缩小或增长到图像的原始宽度
`fluid-grow`	`布尔值`	`false`	类似于 'fluid' 属性，但允许图像放大到超过其原始宽度
`height`	`Number` 或 `String`		在图像的 'height' 属性上设置的值
`left`	`布尔值`	`false`	设置后将图像浮动到左侧
`right`	`布尔值`	`false`	设置后将图像浮动到右侧
`rounded`	`Boolean` 或 `String`	`false`	设置为 'true' 时，使图像的角略微圆润。也可以用来禁用圆角或使图像成为圆形/椭圆形。有关详细信息，请参阅文档
`sizes` v2.1.0+	`Array` 或 `String`		一个或多个用逗号分隔的字符串（或字符串数组），表示一组源大小。可选择与 srcset 属性结合使用
`src`	`字符串`		为 `src` 属性设置的 URL
`srcset` v2.1.0+	`Array` 或 `String`		用逗号分隔的一个或多个字符串（或一个字符串数组），指示用户代理可使用的可能的图像源
`thumbnail`	`布尔值`	`false`	在图像周围添加缩略图边框
`width`	`Number` 或 `String`		在图像的 `width` 属性上设置的值

`<b-img-lazy>`