{"id":17019,"library":"ink-picture","title":"Ink Picture Component","description":"ink-picture is an actively maintained Ink component designed for rendering images within CLI/TUI applications, providing a robust alternative to less feature-rich or unmaintained libraries. Currently at version 1.3.5, the library receives regular updates, including dependency bumps, bug fixes, and new features like partial image loading and support for advanced terminal graphics protocols. It intelligently detects terminal capabilities, supporting Kitty, iTerm2, Sixel, Half-block, Braille, and ASCII art, with graceful fallbacks. Its key differentiator is the automatic and prioritized protocol detection, ensuring the best possible image quality for the user's terminal, and its continuous development compared to dormant alternatives. The package requires Node.js >=18 and peer dependencies of Ink >=5 and React >=18.","status":"active","version":"1.3.5","language":"javascript","source_language":"en","source_url":"https://github.com/endernoke/ink-picture","tags":["javascript","ink","image","photo","display","component","jsx","react","picture"],"install":[{"cmd":"npm install ink-picture","lang":"bash","label":"npm"},{"cmd":"yarn add ink-picture","lang":"bash","label":"yarn"},{"cmd":"pnpm add ink-picture","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Ink CLI/TUI applications.","package":"ink","optional":false},{"reason":"Peer dependency for React components in Ink.","package":"react","optional":false}],"imports":[{"note":"`Image` is the default export of the package, bundled with named exports like `TerminalInfoProvider`. Do not use a named import for `Image` itself.","wrong":"import { Image } from 'ink-picture'","symbol":"Image","correct":"import Image, { TerminalInfoProvider } from 'ink-picture'"},{"note":"`TerminalInfoProvider` is a named export and must be imported with curly braces.","wrong":"import TerminalInfoProvider from 'ink-picture'","symbol":"TerminalInfoProvider","correct":"import { TerminalInfoProvider } from 'ink-picture'"},{"note":"When importing types, use `import type` for clarity and better tree-shaking with modern bundlers. The specific type name for protocol names introduced in v1.3.2 is not explicitly documented but can be inferred or checked in `.d.ts` files.","wrong":"import { TerminalInfoProviderProps } from 'ink-picture'","symbol":"TerminalInfoProvider (Type)","correct":"import type { TerminalInfoProviderProps } from 'ink-picture'"}],"quickstart":{"code":"import React from 'react';\nimport { Box, render } from 'ink';\nimport Image, { TerminalInfoProvider } from 'ink-picture';\n\nfunction App() {\n  return (\n    <TerminalInfoProvider>\n      <Box flexDirection=\"column\">\n        <Image\n          src=\"https://placehold.co/400x200.png?text=Hello+Ink\"\n          width={40}\n          height={20}\n          alt=\"Example image\"\n        />\n      </Box>\n    </TerminalInfoProvider>\n  );\n}\n\nrender(<App />);\n","lang":"typescript","description":"This example demonstrates the basic setup for `ink-picture`, rendering an image from a URL within an Ink application, wrapped in the required `TerminalInfoProvider`."},"warnings":[{"fix":"Ensure your Ink component tree, or at least the part containing `<Image>` components, is wrapped with `<TerminalInfoProvider>`.","message":"All `Image` components must be wrapped within a `TerminalInfoProvider`. Failure to do so will result in runtime errors or incorrect rendering as terminal capabilities cannot be detected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your Node.js environment to version 18 or newer.","message":"The package requires Node.js version 18 or higher. Older Node.js versions are not supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `ink` and `react` are installed at their specified minimum versions: `npm install ink@\"^5\" react@\"^18\"`.","message":"This library has peer dependencies on `ink` (version >=5) and `react` (version >=18). Using older versions may lead to compatibility issues or errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update your codebase to leverage the specific literal union types for the `protocol` prop for better type safety and autocompletion.","message":"The `protocol` prop for the `Image` component was typed as a generic `string` prior to v1.3.2. Since v1.3.2, it is a literal union type of supported protocols (e.g., `'auto' | 'ascii' | 'braille' | 'halfBlock' | 'sixel' | 'iterm2' | 'kitty'`), improving TypeScript developer experience.","severity":"gotcha","affected_versions":">=1.3.2"},{"fix":"If you need to display images before they are fully loaded, explicitly set `allowPartial={true}` on the `Image` component.","message":"The `allowPartial` prop was introduced in v1.3.4, allowing partially loaded images to render. This behavior is disabled by default.","severity":"gotcha","affected_versions":">=1.3.4"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Wrap your root Ink component, or at least the section containing `Image` components, with `<TerminalInfoProvider>`.","cause":"The `Image` component was rendered without being nested inside a `TerminalInfoProvider` component.","error":"Error: Could not find 'TerminalInfoProvider' context. Make sure you wrap your app with <TerminalInfoProvider>"},{"fix":"Change your import statement to `import Image, { TerminalInfoProvider } from 'ink-picture'` to correctly import `Image` as the default export.","cause":"Attempting to import `Image` as a named export (`import { Image } from 'ink-picture'`) when it is the default export.","error":"TypeError: (0 , ink_picture_1.Image) is not a function or TypeError: Image is not a constructor"},{"fix":"Change your import statement to `import { TerminalInfoProvider } from 'ink-picture'` (or `import Image, { TerminalInfoProvider } from 'ink-picture'`) to correctly import `TerminalInfoProvider` as a named export.","cause":"Attempting to import `TerminalInfoProvider` as a default export (`import TerminalInfoProvider from 'ink-picture'`) when it is a named export.","error":"SyntaxError: Named export 'TerminalInfoProvider' not found. The requested module 'ink-picture' does not provide an export named 'TerminalInfoProvider'"},{"fix":"Ensure your project is configured for ESM (e.g., `\"type\": \"module\"` in `package.json`) and use `import` statements instead of `require()`.","cause":"Attempting to `require()` the `ink-picture` package in a CommonJS environment, but it is an ESM-only package.","error":"ERR_REQUIRE_ESM"}],"ecosystem":"npm","meta_description":null}