图片(Images)

用于使图像（通过 <b-img> 组件）进入响应行为的文档和示例（这样，它们就不会变得比其父元素大），可以选择通过为它们添加轻型样式（全部通过属性）。

BootstrapVue 的图像组件支持圆形图像，缩略图样式，对齐方式，甚至还可以创建具有可选纯色背景颜色的空白图像。可通过 <b-img-lazy> 免费组件获得对延迟加载的图像的支持。

图像 src 解析

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

图像样式

可以使用几种道具来设置渲染图像元素的样式。以下小节介绍了各种选项。

响应式图像

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

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

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

Small image with `fluid`:

Small image with `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>

使用 block 属性强制将图像显示为块元素，而不是浏览器默认的 inline-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>

圆角

通过将圆角支柱设置为以下值之一，可以控制圆角：

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>

对齐图像

使图像的布尔属性 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>

居中对齐（块级）：

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

注意：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>

注意：

在空白图像模式下，如果仅设置宽度或高度之一，则图像的宽度和高度都将设置为相同的值。
在空白图像模式下，如果未设置宽度和高度，则宽度和高度都将在内部设置为 1。
blank 属性优先于 src 属性。如果同时设置了两者，然后将 blank 设置为 false ，则将显示 src 中指定的图像。
使用 SVG 图像数据 URL 渲染空白图像。
即使未设置 blank ，width 和 height 属性也会将 width 和 height 属性应用于渲染的 <img> 标签。

`srcset` 支持

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

有关这些属性的用法的详细信息，请参阅 MDN's Responsive Images【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')
在版本 2.1.0 中添加了对 srcset 和 sizes 的支持

延迟加载的图像

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

如果浏览器支持（或通过polyfill）支持延迟加载图像，请使用 IntersectionObserver 来检测应显示的图像。如果 未检测到 IntersectionObserver 支持，则将始终显示该图像。

用法

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

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

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

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

随时使用 <b-img> 的 fluid ，fluid-grow ，thumbnail ，和 rounded 属性。

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

throttle 属性控制在检查图像是否进入视图（或在视图 offset 范围内）之前发生 scroll（或 resize ，或 orientationchange ，或 transitionend）事件后多长时间（以毫秒为单位）。默认值为 100（毫秒）。如果检测到 IntersectionObserver 支持，则 throttle 不起作用。

进入图像并显示图像后，将删除事件侦听器和/或路口观察器。

用法示例：

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

强制显示延迟加载的图像

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

懒加载 `srcset` 支持

<b-img-lazy> 支持在呈现的 <img> 元素上设置 srcset 和 sizes 属性。这些道具只有在图像出现后才会应用于图像。

有关道具用法的详细信息和限制，请参见上面的 srcset 支持。

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

组件引用

`<b-img>`

功能组件

查看源代码

<b-img> 属性

属性

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

`<b-img-lazy>`

查看源代码

<b-img-lazy> 属性

Properties

属性 (Click to sort Ascending)	类型	默认值	描述
`src` Required	String		设置“src”属性的网址
`srcset` v2.1.0+	String or Array		一个或多个用逗号分隔的字符串（或字符串数组），指示用户代理可以使用的可能图像源
`sizes` v2.1.0+	String or Array		一个或多个用逗号分隔的字符串（或字符串数组），指示一组源大小。可选与srcset 属性结合使用
`alt`	String		为“alt”属性设置的值
`width`	Number or String		在图片的“width”属性上设置的值
`height`	Number or String		在图片的“height”属性上设置的值
`blank-src`	String		占位符图像而不是空白图像
`blank-color`	String	`'transparent'`	将空白占位符图像的颜色设置为指定的CSS颜色值
`blank-width`	Number or String		在占位符图像的'width'属性上设置的值。默认为'width'属性的值
`blank-height`	Number or String		在占位符图像的“高度”属性上设置的值。默认为'height'属性的值
`show`	Boolean	`false`	如果设置为 true，将强制显示通过“src”道具指定的图像
`fluid`	Boolean	`false`	使图像响应。图像将根据需要缩小或增大图像的原始宽度
`fluid-grow`	Boolean	`false`	类似于“fluid”属性，但允许图像放大到其原始宽度以上
`block`	Boolean	`false`	强制将图像显示为块元素，而不是浏览器默认的inline-block元素
`thumbnail`	Boolean	`false`	在图像周围添加缩略图边框
`rounded`	Boolean or String	`false`	设置为“true”时，会使图像角稍微变圆。也可以用于禁用圆角或使图像为圆形/椭圆形。有关详细信息，请参阅文档
`left`	Boolean	`false`	设置后将图像向左浮动
`right`	Boolean	`false`	设置后将图像向右浮动
`center`	Boolean	`false`	将图像水平居中
`offset`	Number or String	`360`	加载惰性图像之前，距视口边缘的像素数

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件	命名输出	导入路径
`<b-img>`	`BImg`	`bootstrap-vue`
`<b-img-lazy>`	`BImgLazy`	`bootstrap-vue`

示例：

import { BImg } from 'bootstrap-vue'
Vue.component('b-img', BImg)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出	导入路径
`ImagePlugin`	`bootstrap-vue`