BlogPlaygroundOne

VImg API

ads via vuetify

Props
name
type
default
absolute
New in v3.7.0
boolean

false

Applies position: absolute to the component.

alt
string

undefined

Alternate text for screen readers. Leave empty for decorative images.

aspect-ratio
string | number

undefined

Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.

color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-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
any

undefined

Apply a custom class to the internal content element.

cover
boolean

false

Resizes the background image to cover the entire container.

crossorigin
New in v3.4.0
'' | 'anonymous' | 'use-credentials'

undefined

Specify that images should be fetched with CORS enabled MDN

draggable
New in v3.4.0
boolean | 'true' | 'false'

undefined

Controls the draggable behavior of the image. See MDN.

eager
boolean

false

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
string

undefined

The gradient to apply to the image. Only supports linear-gradient syntax, anything else should be done with classes.

height
string | number

undefined

Sets the height for the component.

image-class
New in v3.12.0
any

undefined

Applies CSS classes to the inner <img> element.

inline
boolean

false

Display as an inline element instead of a block, also disables flex-grow.

lazy-src
string

undefined

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

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

options
IntersectionObserverInit

{
  root: undefined,
  rootMargin: undefined,
  threshold: undefined
}

Options that are passed to the Intersection observer constructor.

position
New in v3.4.0
string

undefined

Applies object-position styles to the image and placeholder elements.

referrerpolicy
New in v3.4.0
  | 'origin'
  | 'no-referrer'
  | 'no-referrer-when-downgrade'
  | 'origin-when-cross-origin'
  | 'same-origin'
  | 'strict-origin'
  | 'strict-origin-when-cross-origin'
  | 'unsafe-url'

undefined

Define which referrer is sent when fetching the resource MDN

rounded
string | number | boolean

undefined

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
string

undefined

For use with srcset, see MDN.

src
  | string
  | { src: string; srcset: string; lazySrc: string; aspect: number }

The image URL. This prop is mandatory.
srcset
string

undefined
A set of alternate images to use based on device size. Read more….
tile
boolean

false
Removes any applied border-radius from the component.
transition
string | boolean | (TransitionProps & { component: Component })

'fade-transition'
The transition to use when switching from lazy-src to src. Can be one of the built in or custom transition.
width
string | number

undefined
Sets the width for the component.
Events
name
type
error
[string]

Emitted if the image fails to load.
load
[string]

Emitted when the image is loaded.
loadstart
[string]

Emitted when the image starts to load.
Slots
never

never

never

never

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>.
Exposed
string

HTMLImageElement

number

number

'error' | 'loading' | 'idle' | 'loaded'

currentSrc
The current source of the image. This is the image that is currently being displayed. This is useful for determining if the image is loading or not.
image
The image element.
naturalHeight
The natural height of the image.
naturalWidth
The natural width of the image.
state
The current state of the image. This is useful for determining if the image is loading or not.
SASS Variables
name
default
$img-card-media-height
200px
$img-preload-filter
blur(4px)
$img-rounded-border-radius
settings.$border-radius-root