{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 图像\n",
    "\n",
    "显示一张图片。这个元素基于 Quasar 的 [QImg 组件](https://quasar.dev/vue-components/img)。\n",
    "\n",
    "`source`：图像的来源，可以是 URL、本地文件路径、`base64` 字符串或 `PIL` 图像。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.image.Image at 0x2767f997810>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.image('https://picsum.photos/id/377/640/360')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 本地文件\n",
    "您也可以通过传递图像文件的路径来使用本地图像。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.image.Image at 0x27612283290>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.image('website/static/logo.png').classes('w-16')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Base64字符串\n",
    "您也可以使用 Base64 字符串作为图像源。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.image.Image at 0x27612243e90>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='\n",
    "ui.image(base64).classes('w-2 h-2 m-auto')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `PIL` 图像\n",
    "您也可以使用 `PIL` 图像作为图像源。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.image.Image at 0x2767f9ad850>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import numpy as np\n",
    "from nicegui import ui\n",
    "from PIL import Image\n",
    "\n",
    "image = Image.fromarray(np.random.randint(0, 255, (100, 100), dtype=np.uint8))\n",
    "ui.image(image).classes('w-32')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Lottie文件\n",
    "\n",
    "您还可以使用带有动画的[Lottie文件](https://lottiefiles.com/)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.html.Html at 0x2761214a190>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.add_body_html('<script src=\"https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js\"></script>')\n",
    "\n",
    "src = 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json'\n",
    "ui.html(f'<lottie-player src=\"{src}\" loop autoplay />').classes('w-full')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 图像链接\n",
    "\n",
    "通过将图像包裹在[ui.link](https://nicegui.io/documentation/link)中，图像可以链接到另一个页面。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.link(target='https://github.com/zauberzeug/nicegui'):\n",
    "    ui.image('https://picsum.photos/id/41/640/360').classes('w-64')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 强制重新加载\n",
    "您可以通过调用 `force_reload` 方法来强制重新加载图像。它将在图像URL后附加一个时间戳，这将使浏览器重新加载图像。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x27612cc7110>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "img = ui.image('https://picsum.photos/640/360').classes('w-64')\n",
    "\n",
    "ui.button('Force reload', on_click=img.force_reload)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 字幕和叠加层\n",
    "\n",
    "通过在 `ui.image` 内部嵌套元素，您可以创建增强效果。\n",
    "\n",
    "使用[Quasar类](https://quasar.dev/vue-components/img)进行字幕的定位和样式设计。要叠加SVG，请使`viewBox`的大小与图像的实际大小完全匹配，并提供`100%`的宽度/高度以匹配实际渲染的大小。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.image('https://picsum.photos/id/29/640/360'):\n",
    "    ui.label('Nice!').classes('absolute-bottom text-subtitle2 text-center')\n",
    "\n",
    "with ui.image('https://cdn.stocksnap.io/img-thumbs/960w/airplane-sky_DYPWDEEILG.jpg'):\n",
    "    ui.html('''\n",
    "        <svg viewBox=\"0 0 960 638\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n",
    "        <circle cx=\"445\" cy=\"300\" r=\"100\" fill=\"none\" stroke=\"red\" stroke-width=\"20\" />\n",
    "        </svg>\n",
    "    ''').classes('bg-transparent')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}