@shihuo/image-component

可代替传统img图片的图片扩展组件

Usage no npm install needed!

<script type="module">
  import shihuoImageComponent from 'https://cdn.skypack.dev/@shihuo/image-component';
</script>

README

加强版图片基础组件

@shihuo/image-component

可代替原生的 img 标签

API

参数名 说明 必填 类型 默认值 备注
component 指定图片外侧容器 string div
src 图片地址 必填 string 可支持动态修改
width 设置图片宽度 number 100
height 设置图片高度 number 不设置默认图片自动适应高度
objectFit 图片裁剪模式 Enum scale-down contain | cover | fill | none
| revert | scale-down
imageRef 图片标签引用 { current: img }
onLoad 图片加载成功回调 function args:
image: 图片dom对象
naturalWidth 原始宽度
naturalHeight 原始高度
renderWidth 渲染宽度
renderHeight 渲染高度
...包含其他dom属性
onError 图片加载失败回调
hasBorder 显示边框 boolean false v1.1.1
toolbar 显示工具栏 boolean false v1.1.1
hasPreview 显示预览工具 boolean true v1.1.1
onPreview 预览回调 function v1.1.1 默认新开窗口显示图片
hasEdit 显示编辑工具 boolean true v1.1.1
onEdit 编辑回调 function v1.1.1
hasDelete 显示删除工具 boolean true v1.1.1
onDelete 删除回调 function v1.1.1
renderToolbar 自定义渲染工具栏 function v1.1.1