@opensourceframework/next-images
Advanced tools
+61
| # @opensourceframework/next-images | ||
| Import images (jpg, jpeg, png, svg, gif, ico, webp, jp2, avif) in Next.js applications. A maintained fork of the original next-images with TypeScript support and compatibility with Next.js 12-16. | ||
| > **Notice**: This package is primarily for legacy support or specific use cases. Next.js 10+ includes a built-in [Image component](https://nextjs.org/docs/api-reference/next/image) that provides automatic image optimization. | ||
| ## Install | ||
| ```bash | ||
| npm install @opensourceframework/next-images | ||
| ``` | ||
| ## Setup | ||
| ```javascript | ||
| // next.config.js | ||
| const withImages = require('@opensourceframework/next-images'); | ||
| module.exports = withImages(); | ||
| ``` | ||
| ## Usage | ||
| ```jsx | ||
| import img from './my-image.jpg'; | ||
| export default function MyComponent() { | ||
| return <img src={img} alt="My Image" />; | ||
| } | ||
| ``` | ||
| ## Features | ||
| - **Local & Remote Loading**: Load images from local filesystem or remote CDN (via `assetPrefix`). | ||
| - **Base64 Inlining**: Automatically inline small images (default < 8KB) to reduce HTTP requests. | ||
| - **Cache Busting**: Content hash in filenames (`[name]-[hash].[ext]`). | ||
| - **TypeScript**: Built-in type definitions and support for image imports. | ||
| - **Configurable**: Customize extensions, limits, output names, and more. | ||
| ## Configuration Options | ||
| - `inlineImageLimit`: Max size in bytes for Base64 inlining (default: `8192`). | ||
| - `assetPrefix`: CDN/external domain prefix. | ||
| - `basePath`: Application base path. | ||
| - `fileExtensions`: Array of extensions to handle. | ||
| - `exclude`: Path to exclude from this loader. | ||
| - `name`: Output filename template (default: `[name]-[hash].[ext]`). | ||
| - `esModule`: Use ES modules syntax for output (default: `false`). | ||
| - `dynamicAssetPrefix`: Enable dynamic asset prefix resolution at runtime (default: `false`). | ||
| ## TypeScript Support | ||
| Add to `additional.d.ts`: | ||
| ```typescript | ||
| /// <reference types="@opensourceframework/next-images" /> | ||
| ``` | ||
| ## Links | ||
| - [Documentation](https://github.com/riceharvest/opensourceframework/tree/main/packages/next-images#readme) | ||
| - [GitHub](https://github.com/riceharvest/opensourceframework/tree/main/packages/next-images) | ||
| - [NPM](https://www.npmjs.com/package/@opensourceframework/next-images) |
+10
-0
| # @opensourceframework/next-images | ||
| ## 1.9.1 | ||
| ### Patch Changes | ||
| - Modernization and stabilization fixes: | ||
| - Standardized scripts and CI/CD lockfiles | ||
| - Fixed lint rules and CI/CD unblocking | ||
| - Added llms.txt for AI-First Discovery | ||
| - Include llms.txt in published files | ||
| ## 1.9.0 | ||
@@ -4,0 +14,0 @@ |
+13
-12
| { | ||
| "name": "@opensourceframework/next-images", | ||
| "version": "1.9.0", | ||
| "version": "1.9.1", | ||
| "description": "Import images (jpg, jpeg, png, svg, gif, ico, webp, jp2, avif) in Next.js applications. Fork of next-images with TypeScript support.", | ||
@@ -56,14 +56,5 @@ "keywords": [ | ||
| "CHANGELOG.md", | ||
| "LICENSE" | ||
| "LICENSE", | ||
| "llms.txt" | ||
| ], | ||
| "scripts": { | ||
| "build": "tsup", | ||
| "dev": "tsup --watch", | ||
| "lint": "eslint src/", | ||
| "typecheck": "tsc --noEmit", | ||
| "test": "vitest run", | ||
| "test:watch": "vitest", | ||
| "test:coverage": "vitest run --coverage", | ||
| "clean": "rm -rf dist coverage node_modules" | ||
| }, | ||
| "dependencies": { | ||
@@ -105,3 +96,13 @@ "file-loader": "^6.2.0", | ||
| "url": "https://github.com/sponsors/opensourceframework" | ||
| }, | ||
| "scripts": { | ||
| "build": "tsup", | ||
| "dev": "tsup --watch", | ||
| "lint": "eslint src/", | ||
| "typecheck": "tsc --noEmit", | ||
| "test": "vitest run --passWithNoTests", | ||
| "test:watch": "vitest", | ||
| "test:coverage": "vitest run --coverage", | ||
| "clean": "rm -rf dist coverage node_modules" | ||
| } | ||
| } |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
65589
3.88%12
9.09%0
-100%