{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "The ``Image`` pane embeds any known image format file in panel if provided a local path, or will link to a remote image if provided with a URL.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shown when a user cannot load or display the image. \n",
    "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
    "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
    "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
    "* **``object``** (str or object): The Image file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_extension_`` method, where extension is an image file extension.\n",
    "* **``style``** (dict): Dictionary specifying CSS styles\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Image`` pane can be pointed at any local or remote image file. If given a URL starting with ``http`` or ``https``, the ``embed`` parameter determines whether the image will be embedded or linked to:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "jpg_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/jpeg_sample.jpeg')\n",
    "png_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/png_sample.png')\n",
    "webp_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/webp_sample.webp')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "pn.Column(jpg_pane, png_pane, webp_pane)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can scale the size of the image by setting a specific fixed `width` or `height`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "png_pane.clone(width=400)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively we can scale the width and height using the `sizing_mode`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "pn.pane.Image(\n",
    "    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can add a caption to the image by using the caption "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.Image(\n",
    "    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width', caption='World Map'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note that by default the aspect ratio of the image is fixed, and so there may be a gap beside or below the image even in responsive sizing modes. To override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values.\n",
    "\n",
    "## PIL\n",
    "\n",
    "The Image pane will render any component that defines `_repr_[png | jpeg | svg]_` methods including PIL images:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from PIL import Image, ImageDraw\n",
    "\n",
    "im = Image.new(mode='RGB', size=(256, 256))\n",
    "\n",
    "draw = ImageDraw.Draw(im)\n",
    "draw.line((0, 0) + im.size, fill=128, width=5)\n",
    "draw.line((0, im.size[1], im.size[0], 0), fill=128, width=5)\n",
    "draw.rectangle([(96, 96), (160, 160)], fill=(0, 0, 128), width=10)\n",
    "\n",
    "pn.pane.Image(im)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}