Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Themes
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Tsconfig Alias Image Resolver

CMSZCMSZ94 downloads

Read tsconfig.json compilerOptions.paths and resolve @/… style image paths in real time so images render in Obsidian.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates2

Resolve @/… style path-alias image references (from tsconfig.json compilerOptions.paths) in real time, so images render in Obsidian reading view and live preview — without modifying your notes on disk.

Why

Astro / Vite projects (e.g. Astro Paper) reference images with aliases like ![alt](@/assets/images/example.jpg). Obsidian does not understand the @ alias, so the image shows as "file not found". This plugin reads the vault's tsconfig.json and rewrites those paths at render time.

Features

  • Reads compilerOptions.paths from the vault-root tsconfig.json (e.g. { "@/*": ["./src/*"] } → @/ → src/).
  • Rewrites rendered <img> elements and Obsidian internal-embed placeholders in real time (markdown post-processor + MutationObserver), in both reading view and live preview.
  • Never edits note files on disk — everything happens in the render layer.
  • Auto-reloads when tsconfig.json changes; also provides a "Reload tsconfig aliases" command.
  • Non-alias relative paths that Obsidian fails to resolve are additionally tried as vault-root paths.

Install

  1. Build the plugin (see below).
  2. Copy main.js and manifest.json into <your-vault>/.obsidian/plugins/tsconfig-alias/.
  3. Enable Tsconfig Alias Image Resolver in Settings → Community plugins (disable Restricted mode if needed).

Development

npm install
npm run build   # bundles src/main.ts and outputs main.js to the repo root

npm run dev starts esbuild in watch mode (output goes to the repo root).

Requirements

  • Obsidian v1.0+
  • A tsconfig.json at the vault root with compilerOptions.paths

License

MIT

HealthExcellent
ReviewPassed
About
Resolve @/… tsconfig.json path-alias image references in real time so images render in Reading View and Live Preview without modifying note files. Read compilerOptions.paths at the vault root and rewrite rendered <img> elements and internal-embed placeholders at render time. Auto-reload aliases when tsconfig.json changes and never edit notes on disk.
ImagesFiles
Details
Current version
0.1.1
Last updated
2 months ago
Created
2 months ago
Updates
2 releases
Downloads
94
Compatible with
Obsidian 1.0.0+
Platforms
Desktop, Mobile
License
MIT
Report bugRequest featureReport plugin
Author
CMSZCMSZcmsz001
GitHubcmsz001
  1. Community
  2. Plugins
  3. Images
  4. Tsconfig Alias Image Resolver

Related plugins

Pixel Perfect Image

Pixel perfect 100% image resizing, copy to clipboard, show image in Finder/Explorer, and much more.

Notebook Navigator

A better file browser and calendar inspired by Apple Notes, Bear, Evernote and Day One.

Claudian

Embeds Claude Code/Codex and other local Agents as AI collaborators in your vault.

Advanced URI

Control everything with URI.

Thino

Quickly capture memos and display them in the sidebar with a heatmap. (Closed source)

Local REST API with MCP

Unlock your automation needs by interacting with your notes over a secure REST API.

ChatGPT MD

A seamless integration of ChatGPT, OpenRouter.ai and local LLMs via Ollama into your notes.

Quick Explorer

Perform file explorer operations (and see your current file path) from the title bar, using the mouse or keyboard.

QuickAdd

Quickly add new notes or content to your vault.

Omnisearch

Intelligent search for your notes, PDFs, and OCR for images.