{"id":18626740,"url":"https://github.com/th3rdwave/web-image","last_synced_at":"2025-05-13T01:14:06.133Z","repository":{"id":38962521,"uuid":"263141451","full_name":"th3rdwave/web-image","owner":"th3rdwave","description":"\u003cImage /\u003e component for react-native-web","archived":false,"fork":false,"pushed_at":"2024-09-11T15:43:37.000Z","size":2630,"stargazers_count":39,"open_issues_count":11,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-13T01:13:59.742Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/th3rdwave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-11T19:42:33.000Z","updated_at":"2024-09-11T15:43:40.000Z","dependencies_parsed_at":"2023-02-18T04:30:50.711Z","dependency_job_id":"592e6bc5-36aa-4911-860d-c961b6d1e9b8","html_url":"https://github.com/th3rdwave/web-image","commit_stats":{"total_commits":95,"total_committers":2,"mean_commits":47.5,"dds":"0.11578947368421055","last_synced_commit":"dc0b7a498bbe2fd049b261252f985185cd09c338"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Fweb-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Fweb-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Fweb-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Fweb-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/th3rdwave","download_url":"https://codeload.github.com/th3rdwave/web-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851072,"owners_count":21973674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T04:38:53.889Z","updated_at":"2025-05-13T01:14:06.098Z","avatar_url":"https://github.com/th3rdwave.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Image\n\n[![CI](https://github.com/th3rdwave/web-image/workflows/CI/badge.svg)](https://github.com/th3rdwave/web-image/actions?query=workflow%3ACI) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n\nSSR friendly image component that renders to a `\u003cpicture\u003e` element with screen density and webp support while keeping the same api as React Native `\u003cImage /\u003e`.\n\n## Features\n\n- Same API and behavior as the react-native Image component.\n- Uses modern browser features and is SSR / static website friendly.\n- Lazy loading using the html `loading=\"lazy\"` attritute (https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading).\n- Automatic avif and webp file generation and loading for supported browsers.\n- Density support using the same file naming convention as react-native.\n- Automatic image dimensions for local assets.\n\n## Install\n\n```sh\nnpm install @th3rdwave/web-image @th3rdwave/web-image-loader\n```\n\n## Usage\n\n### Local images\n\nIn your webpack config:\n\n```js\n{\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|gif)$/,\n        loader: '@th3rdwave/web-image-loader',\n      },\n    ]\n  }\n}\n```\n\nIn your app:\n\n```js\nimport { Image } from '@th3rdwave/web-image';\n\n\u003cImage source={require('../image/img.png')} /\u003e;\n```\n\n### Network images\n\nThis image component can also be used with network image. To support multiple formats and densities you must build an object to use as the source prop.\n\n```ts\ntype Source = {\n  /**\n   * Default url to use for the image.\n   */\n  uri: string;\n  /**\n   * Responsive image sources.\n   */\n  sources?: Array\u003c{\n    /**\n     * Mime type for this source.\n     */\n    type: string;\n    /**\n     * [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) for this source type.\n     */\n    srcSet: string;\n  }\u003e;\n};\n```\n\nExample:\n\n```js\n\u003cImage\n  source={{\n    sources: [\n      {\n        srcSet:\n          'https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_1x.webp 1x, https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_2x.webp 2x, https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_3x.webp 3x',\n        type: 'image/webp',\n      },\n      {\n        srcSet:\n          'https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_1x.jpg 1x, https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_2x.jpg 2x, https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_3x.jpg 3x',\n        type: 'image/jpeg',\n      },\n    ],\n    uri: 'https://cdn.th3rdwave.coffee/merchants/rJvse_3Nz/rJvse_3Nz-sm_2x.jpg',\n  }}\n/\u003e\n```\n\n## Caveats\n\n- Curently only a small subset of Image props are implemented.\n\n## Example\n\nTODO\n\n## Demo\n\n- https://www.th3rdwave.coffee/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3rdwave%2Fweb-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fth3rdwave%2Fweb-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3rdwave%2Fweb-image/lists"}