VImg API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| alt | ||
| Alternate text for screen readers. Leave empty for decorative images. | ||
| aspect-ratio | ||
| Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| content-class | ||
| Apply a custom class to the internal content element. | ||
| cover | ||
| Resizes the background image to cover the entire container. | ||
| crossorigin | ||
| Specify that images should be fetched with CORS enabled MDN | ||
| draggable | ||
| Controls the draggable behavior of the image. See MDN . | ||
| eager | ||
| Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | ||
| gradient | ||
| The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the MDN documentation for gradients . | ||
| height | ||
| Sets the height for the component. | ||
| inline | ||
| Display as an inline element instead of a block, also disables flex-grow. | ||
| lazy-src | ||
| Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied. NOTE: This prop has no effect unless either height or aspect-ratio are provided. | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| options | ||
| Options that are passed to the Intersection observer constructor. | ||
| position | ||
| Applies object-position styles to the image and placeholder elements. | ||
| referrerpolicy | ||
| Define which referrer is sent when fetching the resource MDN | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| sizes | ||
| For use with srcset, see MDN . | ||
| src | ||
| The image URL. This prop is mandatory. | ||
| srcset | ||
| A set of alternate images to use based on device size. Read more… . | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| transition | ||
| The transition to use when switching from lazy-src to src. Can be one of the built in or custom transition. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| error | |
| Emitted if the image fails to load. | |
| load | |
| Emitted when the image is loaded. | |
| loadstart | |
| Emitted when the image starts to load. | |
插槽
| default |
| The default Vue slot. |
| error |
| Will be shown if the image fails to load, replacing the placeholder slot. |
| placeholder |
| Display an overlay while the image is loading. |
| sources |
| A list of <source> elements. If this slot is used v-img will render a <picture> instead of <img>. |
可用属性
| currentSrc |
| MISSING DESCRIPTION (edit in github ) |
| image |
| MISSING DESCRIPTION (edit in github ) |
| naturalHeight |
| MISSING DESCRIPTION (edit in github ) |
| naturalWidth |
| MISSING DESCRIPTION (edit in github ) |
| state |
| MISSING DESCRIPTION (edit in github ) |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $img-card-media-height | |
| $img-preload-filter | |
| $img-rounded-border-radius | |