Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Image

A component to display images with lazy-load support.

Usage

import { RImg } from '@rebilly/revel';

<r-img src="https://placehold.co/25" />

Examples

img-single.vue

Lazy load

img-lazy-loaded.vue

API

Props

NameTypeDefaultDescription
srcstring

Input the source URL

altstring'Image'

Input the alternative text for the image

lazybooleanfalse

Make the image lazy loaded

widthstring''

Image width

heightstring''

Image height

Slots

NameDescription
loading

Overrides default loader

Events

NameDescription
onload
onerror
Edit this page
Last Updated: 7/16/24, 6:33 PM
Contributors: Alberto Gualis, John Hannagan, Weetbix, Cesar Level
Prev
Icon
Next
Input