{"id":14971621,"url":"https://github.com/sohanemon/next-image","last_synced_at":"2026-01-21T22:31:35.328Z","repository":{"id":191854830,"uuid":"685540293","full_name":"sohanemon/next-image","owner":"sohanemon","description":"Enhance your Next.js image handling with ease","archived":false,"fork":false,"pushed_at":"2023-11-02T11:25:12.000Z","size":51,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T23:32:54.871Z","etag":null,"topics":["blur-image","next-image","next-images","nextjs","npm","package","placeholder-image","plaiceholder","react","react-svg","sharp","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@sohanemon/next-image","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/sohanemon.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":"2023-08-31T13:11:14.000Z","updated_at":"2024-12-23T09:01:02.000Z","dependencies_parsed_at":"2023-09-01T06:08:04.551Z","dependency_job_id":"9727eef9-e933-4acd-a468-51a34d87628d","html_url":"https://github.com/sohanemon/next-image","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"69e30e88901c2f981d9ff37f4ca1a382e869b22f"},"previous_names":["sohanemon/-sohanemon-next-image"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sohanemon/next-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fnext-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fnext-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fnext-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fnext-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohanemon","download_url":"https://codeload.github.com/sohanemon/next-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fnext-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28645549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T21:29:11.980Z","status":"ssl_error","status_checked_at":"2026-01-21T21:24:31.872Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["blur-image","next-image","next-images","nextjs","npm","package","placeholder-image","plaiceholder","react","react-svg","sharp","svg"],"created_at":"2024-09-24T13:45:33.749Z","updated_at":"2026-01-21T22:31:35.313Z","avatar_url":"https://github.com/sohanemon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sohanemon/next-image 🌟\n\nEnhance your Next.js image handling with ease using the `@sohanemon/next-image` npm package. This package provides two powerful components, `Placeholder` and `Img`, designed to simplify and optimize image loading and rendering within your Next.js applications. 🚀\n\n## Installation 🛠️\n\nYou can install the package using npm:\n\n```bash\nnpm install @sohanemon/next-image\n```\n\nOr with Yarn:\n\n```bash\nyarn add @sohanemon/next-image\n```\n\n## Components 🖼️\n\n### Placeholder 🌈\n\nThe `Img` component from `'@sohanemon/next-image/dist/placeholder'` directory takes care of loading and displaying images with placeholder support. It provides a smooth visual experience by showing a blurred placeholder image while the main image is loading. ⏳\n\n```jsx\nimport Img from '@sohanemon/next-image/dist/placeholder';\n\n\u003cImg src='/path/to/your/image.png' /\u003e;\n```\n\nKey features:\n\n- Automatic generation of a base64-encoded blurred placeholder image.\n- Seamless loading of remote (HTTP) and local images.\n- Supports additional props from the `Img` component.\n\n### Img 📷\n\nThe `Img` component simplifies the integration of Next.js's `Image` component while allowing for easy customization. 🎨\n\n```jsx\nimport Img from '@sohanemon/next-image';\n\n\u003cImg src='/path/to/your/image.png' /\u003e;\n```\n\n### Img/SVG 📜\n\nThe `Img` component also can inject `svg` directly to the `dom`.\n\n```jsx\nimport Img from '@sohanemon/next-image';\n\n\u003cImg inject src='/path/to/your/image.svg' /\u003e;\n```\n\nKey features:\n\n- Intuitive handling of image rendering and aspect ratio.\n- Inject `svg` element directly to the `dom`.\n- Automatic optimization for various screen sizes using the `sizes` attribute.\n- Use `src` prop as `'/public/img.png'`, `'/img.png'` or `'https://hello.world/img.png'`\n- Customization of `className`, `imageClassName`, `placeholderProps`, and more.\n\n## Usage 🚀\n\nHere's a quick guide on how to utilize the components in your Next.js project:\n\n1. Import the desired component:\n\n```jsx\nimport Img from '@sohanemon/next-image';\nimport Placeholder from '@sohanemon/next-image/dist/placeholder';\n```\n\n2. Use the components within your JSX:\n\n```jsx\n\u003cPlaceholder src=\"/path/to/your/image.png\" alt=\"Description of the image\" /\u003e\n\n\u003cImg src=\"/path/to/your/image.png\" alt=\"Description of the image\" /\u003e\n```\n\n## Example 🌟\n\n```jsx\nimport Img from '@sohanemon/next-image';\nimport Img from '@sohanemon/next-image/dist/placeholder';\n\n// ...\n\n\u003cPlaceholder src=\"/path/to/your/image.png\" alt=\"Description of the image\" /\u003e\n\n// ...\n\n\u003cImg src=\"/path/to/your/image.png\" alt=\"Description of the image\" /\u003e\n```\n\n## Contribution 🤝\n\nContributions to the `@sohanemon/next-image` package are welcome! If you encounter any issues or have suggestions for improvements, feel free to open an issue or pull request on the [GitHub repository](https://github.com/sohanemon/next-image).\n\n## License 📜\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n---\n\nElevate your Next.js image handling to the next level with the `@sohanemon/next-image` package. Simplify your code and improve user experience by effortlessly integrating optimized images with placeholders. Happy coding! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fnext-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohanemon%2Fnext-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fnext-image/lists"}