open-index/open-npm huggingface dataset:
npm package: @readr-media/babel-plugin-styled-components
Description: Improve the debugging experience and add server-side rendering support to styled-components
Latest version: 2.0.8-alpha.3

# `babel-plugin-styled-components`

This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:

- consistently hashed component classNames between environments (a must for server-side rendering)
- better debugging through automatic annotation of your styled components based on their context in the file system, etc.
- various types of minification for styles and the tagged template literals styled-components uses

## Quick start

Install the plugin first:

```
npm install --save-dev babel-plugin-styled-components
```

Then add it to your babel configuration:

```JSON
{
  "plugins": ["babel-plugin-styled-components"]
}
```

## Changelog

See [Github Releases](https://github.com/styled-components/babel-plugin-styled-components/releases)

## Documentation

**The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**

- [Usage](https://www.styled-components.com/docs/tooling#usage)
- [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
- [Minification](https://www.styled-components.com/docs/tooling#minification)

## License

Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.

See [LICENSE.md](./LICENSE.md) for more information.
npm package: @readr-media/react-360
Description: Use [pannellum-react](https://github.com/farminf/pannellum-react) to render 360 image/video, check the github page for the documantation.
Latest version: 0.4.2-beta.4

### 360(Panorama) image viewer

Use [pannellum-react](https://github.com/farminf/pannellum-react) to render 360 image/video,
check the github page for the documantation.

Sine pannellum-react use [pannellum](https://pannellum.org/) under the hook,
look for Pannellum document for furthermore explanation.

Although pannellum-react support both 360 image and video. This package only deal with images (for now).
npm package: @readr-media/react-component
Description: ## Feature
Author: xuanchang
Latest version: 2.2.0

# [@readr-media/react-component](https://www.npmjs.com/package/@readr-media/react-component) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-component.svg?style=flat)

## Feature

- `@readr-media/react-component` 整理了 [Readr](https://www.readr.tw/) 網站/靜態專題所需之共用元件。
- 詳細使用方式可參閱各元件的 README.md。
- 注意：此套件僅支援 `ES modules`，需注意使用環境須為 Node.js 12 / Next.js 12 以上。

### Components

- [Readr LOGO](./src/logo): see [src/logo](./src/logo)
- [頁尾贊助按鈕](./src/donate-button): see [src/donate-button](./src/donate-button)
- [訂閱電子報按鈕](./src/subscribe-button): see [src/subscribe-button](./src/subscribe-button)
- [相關報導](./src/related-report): see [src/related-report](./src/related-report)
- [Header贊助按鈕](./src/donate-btn-header-rect): see [src/donate-btn-header-rect](./src/donate-btn-header-rect)

## How to Use This Pkg?

1. Install the npm [package](https://www.npmjs.com/package/@readr-media/react-component)
   `yarn add @readr-media/react-component`
2. Import component in the desired place

## Installation

`yarn install`

## Development

```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)

```
$ yarn build
// or
$ npm run build
// or
$ make build
```

### Transpile React, ES6 Codes to ES5

```
$ make build-lib
```

### NPM Publish

After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,

```
npm publish
```

Note: before publish npm package, we need to bump the package version first.

## TODOs

- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
npm package: @readr-media/react-dropping-text
Latest version: 1.0.9

# [@readr-media/react-dropping-text](https://www.npmjs.com/package/@readr-media/react-dropping-text) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-dropping-text.svg?style=flat)


## Demo
<img src="https://user-images.githubusercontent.com/3000343/235825655-c895b9ed-35dc-4e6c-a65d-7a18345ee6c9.gif">

## Usage Example
```javascript
import DroppingText from '@readr-media/react-dropping-text'
import React from 'react'
import { createRoot } from 'react-dom/client'
const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const mockTextArr = [
  'This is',
  '<span style="3em">Dropping Text</span>',
  'example',
]

root.render(
  <DroppingText
    showLoadingImg
    textArr={mockTextArr}
  />
)
```

## Create Embed Code
See [@readr-media/react-embed-code-generator](https://github.com/readr-media/react/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

## NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/react-dual-slides
Description: ## Demo <img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">
Latest version: 1.1.0

# [@readr-media/react-dual-slides](https://www.npmjs.com/package/@readr-media/react-dual-slides) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-dual-slides.svg?style=flat)

## Demo
<img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">

## Usage Example
```javascript
import DualSlides from '@readr-media/react-dual-slides'
import React from 'react'
import { createRoot } from 'react-dom/client'
const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const slides: [
    {
      content: [
        'In a dense forest lived a red fox named Rusty. He was cunning and always on the hunt for food. One day, while wandering through the woods, he came across a family of rabbits enjoying a delicious carrot feast. Rusty knew he had to find a way to get his paws on those carrots.',
      ],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827862-d76f4e1d-3e32-4aab-9790-945738abcc4e.jpg',
    },
    {
      content: [
        'He hatched a plan to lure the rabbits away from their meal. Rusty pretended to be stuck in a trap, wailing for help. One of the rabbits took pity and approached him, but as soon as the rabbit got close enough, Rusty sprang up and snatched the carrot from his grasp. The rabbits were furious and vowed to never let Rusty get the best of them again.',
      ],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827868-4ed5507e-8881-4b69-9cf0-40282d6b3898.jpg',
    },
    {
      content: ['But Rusty wasn\'t deterred. He came up with an even more devious plan to steal from the rabbits. He disguised himself as a friendly hedgehog and befriended the rabbits. He even helped them gather carrots and other food. However, one day, Rusty\'s true identity was revealed, and the rabbits chased him out of their territory. From that day on, Rusty learned that deceit would never bring true friendship and loyalty.'],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827873-823da419-adb3-4a2c-b71a-f558b2b33f22.jpg',
    },
  ]

root.render(
  <DualSlides slides={mocks.slides} />
)
```

## Create Embed Code
See [@readr-media/react-embed-code-generator](https://github.com/readr-media/react/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/react-embed-code-generator
Description: ## Installation `yarn install`
Latest version: 2.4.3-alpha.25

# [@readr-media/react-embed-code-generator](https://www.npmjs.com/package/@readr-media/react-embed-code-generator) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-embed-code-generator.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 

### Manually Build and Publish
Since we haven't adopt lerna or other monorepo management tools, we have to build and publish new codes by ourselves.

You can follow the following steps to create a new subpkg on the npmjs registry.

1. update `pacakge.json` `version` property (make sure you update version before build since build process will refer to pkg version)
2. `yarn build`: transpile codes and build webpack bundles
3. `npm publish`: publish built files onto npmjs registry

### Monorepo Settings
Due to manual building and publishing, we might encounter collaboration problems. 
You can see this [PR](https://github.com/readr-media/react/pull/138) for more information.

Since this subpkg is NOT under `workspaces` control,
please do not forget to commit `yarn.lock` if changed.
npm package: @readr-media/react-feedback
Description: ## Installation `yarn install`
Author: caesarlee
Latest version: 4.0.0

# [@readr-media/react-feedback](https://www.npmjs.com/package/@readr-media/react-feedback) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-feedback.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @readr-media/react-full-screen-video
Description: ## Installation
Latest version: 1.1.0

# [@readr-media/react-full-screen-video](https://www.npmjs.com/package/@readr-media/react-full-screen-video) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-karaoke.svg?style=flat)

## Installation

`yarn install`

## Development

```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)

```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles

```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5

```
$ make build-lib
```

### NPM Publish

After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,

```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/react-karaoke
Description: ## Installation `yarn install`
Latest version: 2.0.1

# [@readr-media/react-karaoke](https://www.npmjs.com/package/@readr-media/react-karaoke) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-karaoke.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @readr-media/react-qa-list
Description: ## Installation `yarn install`
Author: yihsuanlee
Latest version: 2.0.1

# [@readr-media/react-qa-list](https://www.npmjs.com/package/@readr-media/react-qa-list) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-qa-list.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @readr-media/react-questionnaire
Description: ## Installation `yarn install`
Latest version: 2.0.0

# [@readr-media/react-questionnaire](https://www.npmjs.com/package/@readr-media/react-questionnaire) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-questionnaire.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @readr-media/react-random-text-selector
Description: ## Demo
Latest version: 1.0.2

# [@readr-media/react-random-text-selector](https://www.npmjs.com/package/@readr-media/react-random-text-selector) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-karaoke.svg?style=flat)

## Demo

![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMGYxZDVhNTg4MGZiNGYyNzNkYjFkYTE3MWVjNWI0OWZlNTJiMjIzNiZlcD12MV9pbnRlcm5hbF9naWZzX2dpZklkJmN0PWc/9tTnoUfyc6Squc9T8a/giphy.gif)

## Usage Example

```javascript
import ReactRandomTextSelector from '@readr-media/react-random-text-selector'
import React from 'react'
import styled from 'styled-components'
import { createRoot } from 'react-dom/client'
const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const jsonUrls = [
  'https://editools-gcs.readr.tw/psycho/file_1.json',
  'https://editools-gcs.readr.tw/psycho/file_2.json',
  'https://editools-gcs.readr.tw/psycho/file_3.json',
  'https://editools-gcs.readr.tw/psycho/file_4.json',
  'https://editools-gcs.readr.tw/psycho/file_5.json',
]

root.render(
  <ReactRandomTextSelector
    className="random-text-selector"
    isDebugMode={true}
    jsonUrls={jsonUrls}
    backgroundColor="#000000"
    circleUrl="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/circle.png"
    buttonBackground="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/button-background.png"
    circleUrlMobile="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/circle-mobile.png"
    buttonWording="其他案例"
    loadingImgSrc="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/loading.gif"
  />
)
```

## Installation

`yarn install`

## Development

```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)

```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles

```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5

```
$ make build-lib
```

### NPM Publish

After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,

```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/react-three-story-points
Description: ## Installation `yarn install`
Latest version: 1.0.2

# [@readr-media/react-three-story-points](https://www.npmjs.com/package/@readr-media/react-three-story-points) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-three-story-points.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/scrollable-video
Description: The Reporter scrollable video component
Author: twreporter
Latest version: 1.0.0-beta.0

# scrollable-video

![npm (latest)](https://img.shields.io/npm/v/@twreporter/scrollable-video/latest)
![npm (rc)](https://img.shields.io/npm/v/@twreporter/scrollable-video/rc)

## Usage

### Use buildEmbeddedCode

```js
import { google } from 'googleapis'
import scrollableVideo from '@twreporter/scrollable-video'
import webpackAssets from '@twreporter/scrollable-video/dist/webpack-assets.json'

/* FETCH DATA */

const sheets = await new scrollableVideo.Sheets({
  spreadsheetId: 'your target spreadsheet id',
  auth: new google.auth.GoogleAuth({
    keyFile: 'your-key-file-path', // ex: path.resolve(__dirname, './service-account.json')
    scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'],
  }),
})

const data = await sheets.getJSONData()
// data schema:
// https://github.com/twreporter/orangutan-monorepo/tree/master/packages/scrollable-video/src/types.js

/* BUILD CODE */

const codeString = scrollableVideo.buildEmbeddedCode(data, webpackAssets)
```

### Use the Component

Example:

```js
import ScrollableVideo from '@twreporter/scrollable-video'

const { appProps, ...elseProps } = data
// data schema:
// https://github.com/twreporter/orangutan-monorepo/tree/master/packages/scrollable-video/src/types.js

<ScrollableVideo.Component
  {...appProps}
  {...elseProps}
/>
```

## How to develop this package

### Test dev code

The default dev data is the data of our news article: [從租用到迫遷 ── 南鐵東移，25 年政策與地貌的轉變](https://www.twreporter.org/a/tainan-underground-railway-project-controversy)

You can run makefile command to fetch the latest data:

```sh
make dev-fetch-data

# Or specify your spreadsheet ids with `in` variable (separate with commas)
make dev-fetch-data in=1qMXdqZXtANzpOVlKRJJfVhr6YBOuzHV65VJBoylvxk0,1JwQ95yOsr7NEaAv4eX2L0b_hgKFVNqB6L2LE_rW_UXc,1P-RjNv-dFpEH0TadDHr8bEg-L-58or4IxeOgTWPO6Mo
```

If you change the paths of default data (`dev/data-1.json`, `dev/data-2.json`, and `dev/data-3.json`), you need to update the `dev/entry.js` to to merge your data into the dev sire.

We use `webpack-dev-server` to render a mock article with all elements for development. You can start the server with:

```sh
make dev-server
```

If you need to change the hostname (usually due to the CORS reasons), add `DEV_HOST=[your-custom-hostname]` for giving `webpack-dev-server` the hostname. Example:

```sh
# Start the webpack-dev-server with custom hostname
DEV_HOST=testtest.twreporter.org make dev-server
```

If you need to test your own video files in your machine, you can place them to `dev/static/[filename]`. The files will be served with url `http://localhost:8080/static/[filename]` when the `webpack-dev-server` runs. Remember to update the `src` of `video` in your json files:

```json
{
  "video": {
    "sources": [
      {
        "type": "video/mp4",
        "src": "http://localhost:8080/static/googleearth.mp4"
        /* ... */
      }
    ]
  }
  /* ... */
}
```
npm package: @readr-media/text-selector
Description: ## Installation
Latest version: 1.1.1-beta.13

# [@readr-media/text-selector](https://www.npmjs.com/package/@readr-media/text-selector) &middot; ![npm version](https://img.shields.io/npm/v/@readr-media/react-karaoke.svg?style=flat)

## Installation

`yarn install`

## Development

```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)

```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles

```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5

```
$ make build-lib
```

### NPM Publish

After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,

```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @readr-media/vue-responsive-image-loader
Description: 響應式圖片元件
Author: tsuki
Latest version: 1.5.0

# vue-responsive-image-loader

響應式圖片元件

## 功能
* 讓圖片依照傳入的 `sizes` 設定載入顯示
* 當圖片載入失敗時，嘗試載入其他尺寸的圖片
* 圖片載入動畫效果

## Props
| 名稱 | 資料型別 | 必須 | 預設值 | 說明 |
| --- | --- | --- | --- | --- |
| images | Object | `V` | `{ original: ''}` | 圖片設定，範例： `{ w400: 'https://i.imgur.com/JWLBxWl-w400.jpeg', original: 'https://i.imgur.com/JWLBxWl.jpeg' }`，w400 為寬度 400 以上時，要載入的圖片設定 |
| sizes | String |  | `100vw` | 請參考： [The Image Embed element#sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) |
| alt | String |  | `''` | 替代文字 |
| backgroundColor | String |  | `rgba(0, 0, 0, 0)` | 預設背景顏色 |
| height | Number |  | `null` | 圖片高度 |
| width | Number |  | `null` | 圖片寬度 |
| showLoadingEffect | Boolean |  | `true` | 是否顯示載入特效 |

## 使用說明
### 安裝
```javascript
yarn install @readr-media/vue-responsive-image-loader
```

### 在元件中使用
```vue
<template>
  <ResponsiveImageLoader :images="image" :alt="alt" />
</template>

<script>
// 導入元件
import { ResponsiveImageLoader } from '@readr-media/vue-responsive-image-loader'
export default {
  components: {
    ResponsiveImageLoader,
  },
  data() {
    return {
      images: {
        w400: 'https://i.imgur.com/JWLBxWl-w400.jpeg',
        original: 'https://i.imgur.com/JWLBxWl.jpeg'
      }
    }
  }
}
</script>

<style>
// 導入 CSS，請使用 style，不要使用 style scoped
@import '@readr-media/vue-responsive-image-loader/dist/style.css';
</style>

```

### 客製化載入效果
```vue
<template>
  <ResponsiveImageLoader :images="image" :alt="alt">
    <template v-slot:loading>
      <!-- 客製化載入效果請放這裡 -->
    </template>
  </ResponsiveImageLoader>
</template>
```