open-index/open-npm huggingface dataset:
npm package: @jacktea/img-viewer
Description: **项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**
Latest version: 0.1.7

# @jacktea/img-viewer

**项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**

一款由于 Vue/React 等框架解耦的、无依赖的纯前端图片在线预览器，支持诸如缩放、平移等功能。

## 安装

```bash
npm install @jacktea/img-viewer
# 或者
pnpm add @jacktea/img-viewer
# 或者
yarn add @jacktea/img-viewer
```

## 使用

这是一个基于 Web Components 构建的原生组件，你可以直接在 HTML 当中使用它。

直接引入脚本即可：

```html
<script type="module">
  import '@jacktea/img-viewer';
</script>
```

然后在你的页面中使用 `img-viewer` 组件：

```html
<img-viewer src="path/to/your/image.jpg" width="800px" height="600px"></img-viewer>
```

### 属性 (Attributes)

*   `src`: 图片的 URL，支持普通图片，也支持某些特殊格式如并行的 PSD 解析（需要引入对应解析库）。
*   `width`: 预览器容器的宽度。
*   `height`: 预览器容器的高度。

## 许可证

MIT
npm package: @jacktea/img-viewer-react
Description: **项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**
Latest version: 0.1.7

# @jacktea/img-viewer-react

**项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**

基于 `@jacktea/img-viewer` 封装的 React 版本图片预览器组件。

## 安装

```bash
npm install @jacktea/img-viewer-react @jacktea/img-viewer
# 或者
pnpm add @jacktea/img-viewer-react @jacktea/img-viewer
# 或者
yarn add @jacktea/img-viewer-react @jacktea/img-viewer
```

> **注意：** 该包依赖于核心包 `@jacktea/img-viewer`，请确保同时安装。
>
> 核心包已通过 Web Components 内部注入的方式集成了所有样式，因此您 **不需要单独引入任何 CSS** 文件。

## 使用组件

```tsx
import { ReactNode } from 'react';
import { ImgViewerReact } from '@jacktea/img-viewer-react';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h1>图片预览演示</h1>
      <ImgViewerReact
        src="https://example.com/path/to/your/image.jpg"
        style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}
      />
    </div>
  );
}

export default App;
```

## Props 说明

支持所有标准的 HTML 属性（例如 `style`, `className` 等）以及：

| Prop | 类型 | 描述 |
| :--- | :--- | :--- |
| `src` | `string` (必须) | 想要预览的图片 URL |
| `style` | `React.CSSProperties` | 内联样式，建议至少设定 width 和 height |

## 许可证

MIT
npm package: @jacktea/img-viewer-vue
Description: **项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**
Latest version: 0.1.7

# @jacktea/img-viewer-vue

**项目预览：[https://imgviewer.851621.xyz](https://imgviewer.851621.xyz)**

基于 `@jacktea/img-viewer` 封装的 Vue 3 图片预览组件。

## 安装

```bash
npm install @jacktea/img-viewer-vue @jacktea/img-viewer
# 或者
pnpm add @jacktea/img-viewer-vue @jacktea/img-viewer
# 或者
yarn add @jacktea/img-viewer-vue @jacktea/img-viewer
```

> **注意：** 该包依赖于核心包 `@jacktea/img-viewer`，请确保同时安装。
>
> 核心包已通过 Web Components 内部注入的方式集成了所有样式，因此您 **不需要单独引入任何 CSS** 文件。

## 注册与使用

在你的入口文件（例如 `main.ts`）引入组件，或直接在想要使用的文件中按需引入即可。

```typescript
import { createApp } from 'vue';
import App from './App.vue';

// 核心组件本身在首次导入时会注册 Web Component 并自动注入所需样式
const app = createApp(App);
app.mount('#app');
```

## 局部使用

```vue
<template>
  <div>
    <h1>图片预览演示</h1>
    <ImgViewerVue
      src="https://example.com/path/to/your/image.jpg"
      class="my-viewer"
    />
  </div>
</template>

<script setup lang="ts">
import { ImgViewerVue } from '@jacktea/img-viewer-vue';
</script>

<style scoped>
.my-viewer {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
}
</style>
```

## Props 属性

| Prop | 类型 | 描述 |
| :--- | :--- | :--- |
| `src` | `string` (必须) | 想要预览的图片 URL |

支持传入 `class`, `style` 等常规 Vue 熟悉绑定。

## 许可证

MIT