> ## Documentation Index
> Fetch the complete documentation index at: https://zero-true.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

<Card title="Example Usage" icon="code">
  ```python theme={null}
  #An Example Image: 
  from zero_true import Image


  example = Image(id="Sample", alt="Oopsie!", height=100, src="https://storage.googleapis.com/pod_public/1300/150707.jpg")
  ```
</Card>

<Card title="Example Output" icon="computer">
  <iframe src="https://published.zero-true.com/srrey/exampleimage/" width="100%" height="300" />
</Card>

## Overview

`pydantic model zero_true.Image`

<Note> Image component for displaying web hosted or local images. Supports .png, .jpg, and .jpeg file types</Note>

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "title": "Image",
     "description": "Image component for displaying web hosted or local images. Supports .png, .jpg, and .jpeg file types",
     "type": "object",
     "properties": {
        "id": {
           "description": "Unique id for a component",
           "title": "Id",
           "type": "string"
        },
        "variable_name": {
           "default": "",
           "description": "Optional variable name associated with a component",
           "title": "Variable Name",
           "type": "string"
        },
        "component": {
           "default": "v-img",
           "description": "Vue component name",
           "title": "Component",
           "type": "string"
        },
        "src": {
           "description": "Source URL or Path of the image",
           "title": "Src",
           "type": "string"
        },
        "alt": {
           "default": "",
           "description": "Alternative text for the image",
           "title": "Alt",
           "type": "string"
        },
        "width": {
           "default": 100,
           "description": "Width of the image",
           "title": "Width",
           "type": "integer"
        },
        "height": {
           "default": 100,
           "description": "Height of the image",
           "title": "Height",
           "type": "integer"
        }
     },
     "required": [
        "id",
        "src"
     ]
  }
  ```
</Accordion>

<Info>Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.</Info>

<ResponseField name="zero_true.Image" type="Zero True Component">
  <Expandable title="properties">
    <AccordionGroup>
      <Accordion title="field alt">
        **field alt:** str = '';
        Alternative text for the image
      </Accordion>

      <Accordion title="field component">
        **field component:** str = 'v-img';
        Vue component name
      </Accordion>

      <Accordion title="field height">
        **field height:** int = 100;
        Height of the image
      </Accordion>

      <Accordion title="field src">
        **field src:** str \[Required];
        Source URL or Path of the image
      </Accordion>

      <Accordion title="field width">
        **field width:** int = 100;
        Width of the image
      </Accordion>
    </AccordionGroup>
  </Expandable>
</ResponseField>