image图片

Hidden Title

基础用法：<s-image src="https://example.com/image.png" width="240" height="150" />

属性事件插槽简介

Element Plus Image Documentation

基础用法（width 默认值：未设置；height 默认值：未设置）

本地源码图片（resolver 默认值：未设置）

单图预览（preview 默认值：false）

插槽

全局路径配置

如果图片位于 public/images，可以统一配置基础路径：

app.use(SybzComponents, {
  image: {
    basePath: '/images',
  },
})

app.use(SybzComponents, {
  image: {
    basePath: '/images',
  },
})

之后业务中只需使用：

vue

<s-image src="tenant/test1.png" />

<s-image src="tenant/test1.png" />

如果图片位于 src/assets/images，必须先让 Vite 静态收集资源，再统一配置解析器：

import SybzComponents, { createImageResolver } from 'sybz-components'

const imageModules = import.meta.glob('/src/assets/images/**/*', {
  eager: true,
  query: '?url',
  import: 'default',
})

app.use(SybzComponents, {
  image: {
    resolver: createImageResolver(imageModules, '/src/assets/images'),
  },
})

import SybzComponents, { createImageResolver } from 'sybz-components'

const imageModules = import.meta.glob('/src/assets/images/**/*', {
  eager: true,
  query: '?url',
  import: 'default',
})

app.use(SybzComponents, {
  image: {
    resolver: createImageResolver(imageModules, '/src/assets/images'),
  },
})

业务组件中同样只需写 <s-image src="tenant/test1.png" />。preview-src-list 中的相对路径也会自动解析。

属性

属性名	说明	类型	默认值
`src`	图片地址，相对路径会通过 resolver 或 basePath 解析	string	`''`
`width`	图片宽度，数字自动补 `px`	string / number	-
`height`	图片高度，数字自动补 `px`	string / number	-
`basePath`	相对图片的公共基础路径	string	`''`
`resolver`	自定义图片路径解析函数	`(src) => string \| void`	-
`preview`	是否直接使用当前 `src` 开启单图预览	boolean	`false`
`previewSrcList`	图片预览列表，其中的相对路径也会被解析	string[]	`[]`

其他属性、事件和方法与 Element Plus Image 保持一致，包括 fit、lazy、loading、preview-src-list、load、error、switch、close、show 和 showPreview()。

image图片 ​

Hidden Title ​

属性事件插槽简介 ​

基础用法（width 默认值：未设置；height 默认值：未设置） ​

本地源码图片（resolver 默认值：未设置） ​

单图预览（preview 默认值：false） ​

插槽 ​

全局路径配置 ​

属性 ​