bilibili小程序

使用小贴士

b-image

图片。

属性类型默认值说明版本
src
string图片资源地址
 
modestring'scaleToFill'图片裁剪、缩放的模式 
lazy-loadbooleanfalse图片懒加载 
erroreventhandle当错误发生时的事件，事件参数event = {detail:{errMsg:'something wrong'}} 
loadeventhandle当图片载入完毕时的事件，事件参数event = {detail:{height:'图片高度px', width:'图片宽度px'}} 

注：image组件默认宽度300px、高度225px

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式值说明版本
缩放
scaleToFill
不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
 
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变 
裁剪top不缩放图片，只显示图片的顶部区域 
裁剪bottom不缩放图片，只显示图片的底部区域 
裁剪center不缩放图片，只显示图片的中间区域 
裁剪left不缩放图片，只显示图片的左边区域 
裁剪right不缩放图片，只显示图片的右边区域 
裁剪top left不缩放图片，只显示图片的左上边区域 
裁剪top right不缩放图片，只显示图片的右上边区域 
裁剪bottom left不缩放图片，只显示图片的左下边区域 
裁剪bottom right不缩放图片，只显示图片的右下边区域 

示例代码

<template>
  <b-image src="https://i0.hdslb.com/bfs/archive/10641bbc5189591221c00958f3458f33798c7caa.png"></b-image>
</template>

<script>

export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped></style>
← b-camerab-video →