# @dreamworld/dw-image

> A WebComponent to show zoomable image on documentation & blog sites

Latest version **1.6.0** (published 2026-06-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dreamworld/dw-image
pnpm add @dreamworld/dw-image
yarn add @dreamworld/dw-image
bun add @dreamworld/dw-image
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2026-06-29 |
| First published | 2023-01-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | chiragmoradiya, chetang7, ajay-dhameliya, dw-devops |
| Keywords | image, zoomable-image |

## Links

- npm: https://www.npmjs.com/package/@dreamworld/dw-image
- Repository: https://github.com/DreamworldSolutions/dw-image
- Homepage: https://github.com/DreamworldSolutions/dw-image#readme
- Issues: https://github.com/DreamworldSolutions/dw-image/issues
- npm.io page: https://npm.io/package/@dreamworld/dw-image

## Dependencies (2)

- [@dreamworld/pwa-helpers](https://npm.io/package/@dreamworld/pwa-helpers.md) ^1.14.0
- [@dreamworld/dw-icon-button](https://npm.io/package/@dreamworld/dw-icon-button.md) ^3.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2026-06-29
- 1.5.1-change-in-fallbacksrc.1 (change-in-fallbacksrc) — 2023-12-07
- 1.5.0-fallBackSrc-support.1 (fallBackSrc-support) — 2023-12-07
- 1.4.5-dw-image-loading.1 (dw-image-loading) — 2023-04-13
- 1.4.4-event-issue.1 (event-issue) — 2023-04-12
- 1.4.3-chagne-css-property.1 (chagne-css-property) — 2023-03-30
- 1.4.2-full-screen-issue.1 (full-screen-issue) — 2023-03-29
- 1.4.1-full-screen-misc.1 (full-screen-misc) — 2023-03-29
- 1.4.0-full-screen.1 (full-screen) — 2023-03-29
- 1.3.1-image-lazy-loading.1 (image-lazy-loading) — 2023-03-22
- 1.3.0-outside-click-close-image.1 (outside-click-close-image) — 2023-03-20
- 1.2.2-image-title-issue.1 (image-title-issue) — 2023-03-06
- 1.3.0-image-max-width.1 (image-max-width) — 2023-02-28
- 1.1.0-dw-image-as-es-module.1 (dw-image-as-es-module) — 2023-02-14
- 1.0.0-init.1 (init) — 2023-01-24
- … 18 more at https://npm.io/package/@dreamworld/dw-image/versions

## README

# dw-image

A WebComponent to show zoomable image on documentation & blog sites.

## Behaviours
- Auto compute height or width based on `auto` property, give another value as a css of element.
- When user click on image, then image open in dialog using `zoomSrc` property. if `zoomSrc` is not available then use `src` property to show image in dialog.
- If you want to disable the above zoomable behaviour then `disableZoom` property passed as a `true`.

## Examples
  - Default example
     ```html
       <dw-image src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
     ```

     ```css
       <!-- In this above case you give a height css property as an element. -->
       dw-image {
         width: 200px;
       }
     ```
  - Auto width
     ```html
       <dw-image auto='width' src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
     ```

  - Auto none
    ```html
      <dw-image auto='none' src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
    ```

     ```css
       <!-- In this above case you give a height css property as an element. -->
       dw-image {
         height: 200px;
       }
     ```
  - Disabled zoomable behaviour and open link click on image.
    ```html
      <a href="https://www.google.com/">
        <dw-image src='https://picsum.photos/id/237/200/300' disable-zoom></dw-image>
      </a>
    ```

## Properties

| Property      | Attribute     | Type      | Description                                      |
|---------------|---------------|-----------|--------------------------------------------------|
| `auto`        | `auto`        | `string`  | Auto compute css property name.<br />Default value: height<br />Possible value: height, width, none. |
| `disableZoom` | `disable-zoom` | `boolean` | Disabled zoom behaviour when this value is `true`. |
| `src`         | `src`         | `string`  | Image path/source.                               |
| `title`       | `title`       | `string`  | Image title.                                     |
| `zoomSrc`     | `zoom-src`     | `string`  | Zoomable image path.                             |

---
_Source: https://npm.io/package/@dreamworld/dw-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._