quasar/src/components/img/QImg.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/img"
  },

  "mixins": [ "mixins/ratio" ],

  "behavior": {
    "$listeners": true
  },

  "props": {
    "src": {
      "type": "String",
      "desc": "Path to image",
      "transformAssetUrls": true,
      "examples": [
        "(statics folder) src=\"statics/img/something.png\"",
        "(assets folder) src=\"~assets/my-img.gif\"",
        "(relative path format) :src=\"require('./my_img.jpg')\"",
        "(URL) src=\"https://placeimg.com/500/300/nature\""
      ],
      "category": "model"
    },

    "srcset": {
      "type": "String",
      "desc": "Same syntax as <img> srcset attribute.",
      "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
      "examples": [
        "elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w"
      ],
      "category": "model"
    },

    "sizes": {
      "type": "String",
      "desc": "Same syntax as <img> sizes attribute.",
      "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
      "examples": [
        "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
      ],
      "category": "model"
    },

    "width": {
      "type": "String",
      "desc": "Forces image width; Must also include the unit (px or %)",
      "examples": [
        "280px",
        "70%"
      ],
      "category": "model",
      "addedIn": "v1.9.0"
    },

    "height": {
      "type": "String",
      "desc": "Forces image height; Must also include the unit (px or %)",
      "examples": [
        "280px",
        "70%"
      ],
      "category": "model",
      "addedIn": "v1.9.0"
    },

    "alt": {
      "type": "String",
      "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
      "examples": [ "Two cats" ],
      "category": "content"
    },

    "placeholder-src": {
      "type": "String",
      "desc": "While waiting for your image to load, you can use a placeholder image",
      "transformAssetUrls": true,
      "examples": [
        "(statics folder) src=\"statics/img/some-placeholder.png\"",
        "(assets folder) src=\"~assets/my-placeholder.gif\"",
        "(relative path format) :src=\"require('./placeholder.jpg')\"",
        "(URL) src=\"https://placeimg.com/500/300/nature\""
      ],
      "category": "model"
    },

    "basic": {
      "type": "Boolean",
      "desc": "Do not use transitions; faster render",
      "category": "content"
    },

    "contain": {
      "type": "Boolean",
      "desc": "Make sure that the image getting displayed is fully contained, regardless if additional blank space besides the image is needed on horizontal or vertical",
      "category": "content"
    },

    "position": {
      "type": "String",
      "desc": "Equivalent to CSS background-position property",
      "default": "50% 50%",
      "examples": [ "0 0", "20px 50px" ],
      "category": "content"
    },

    "ratio": {
      "type": [ "String", "Number" ],
      "desc": "Force the component to maintain an aspect ratio",
      "examples": [
        "(Number format) :ratio=\"16/9\"",
        "(String format) ratio=\"1\""
      ],
      "category": "content"
    },

    "transition": {
      "extends": "transition",
      "default": "fade"
    },

    "img-class": {
      "type": [ "Array", "String", "Object" ],
      "desc": "Class definitions to be attributed to the container of image; Does not apply to the caption",
      "examples": [
        "my-special-class",
        ":img-class=\"{ 'my-special-class': <condition> }\""
      ],
      "category": "style",
      "addedIn": "v1.4.0"
    },

    "img-style": {
      "type": "Object",
      "desc": "Apply CSS to the container of the image; Does not apply to the caption",
      "examples": [ ":img-style=\"{ transform: 'rotate(45deg)' }\" "],
      "category": "style",
      "addedIn": "v1.5.11"
    },

    "spinner-color": {
      "extends": "color",
      "desc": "Color name for default Spinner (unless using a 'loading' slot)",
      "category": "style"
    },

    "spinner-size": {
      "extends": "size",
      "desc": "Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)",
      "category": "style"
    },

    "no-default-spinner": {
      "type": "Boolean",
      "desc": "Do not display the default spinner when loading images (unless you are specifying one through the 'loading' slot)",
      "category": "content",
      "addedIn": "v1.1.0"
    },

    "native-context-menu": {
      "type": "Boolean",
      "desc": "Enable the native context menu of the image",
      "category": "behavior",
      "addedIn": "v1.8.4"
    }
  },

  "slots": {
    "default": {
      "desc": "Default slot can be used for captions. See examples"
    },

    "loading": {
      "desc": "While image is loading, this slot is being displayed on top of the component; Suggestions: a spinner or text"
    },

    "error": {
      "desc": "Optional slot to be used when image could not be loaded; make sure you assign a min-height and min-width to the component through CSS"
    }
  },

  "events": {
    "load": {
      "desc": "Emitted when image has been loaded by the browser",
      "params": {
        "src": {
          "type": "String",
          "desc": "URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'",
          "examples": [
            "https://some-site.net/some-img.gif"
          ]
        }
      }
    },

    "error": {
      "desc": "Emitted when browser could not load the image",
      "params": {
        "src": {
          "type": "Error",
          "desc": "JS Error object"
        }
      }
    }
  }
}