{
  "type": "component",
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/img"
  },
  "behavior": {
    "$listeners": {
      "desc": "All native events are being propagated (you don't need the '.native' modifier)"
    }
  },
  "props": {
    "ratio": {
      "type": [
        "String",
        "Number",
        "String",
        "Number"
      ],
      "desc": "Force the component to maintain an aspect ratio",
      "examples": [
        ":ratio=\"4/3\"",
        ":ratio=\"16/9\"",
        "ratio=\"1\"",
        "(Number format) :ratio=\"16/9\"",
        "(String format) ratio=\"1\""
      ],
      "category": "content"
    },
    "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"
    },
    "transition": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "behavior",
      "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": {
      "type": "String",
      "desc": "Color name for default Spinner (unless using a 'loading' slot)",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "spinner-size": {
      "type": "String",
      "desc": "Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)",
      "examples": [
        "16px",
        "2rem"
      ],
      "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"
        }
      }
    }
  }
}