![\"logo1\"]({require(\"./imgs/logo.png\")}){kind=logo}
\n\n {/* Variable */}\n })
\n \n```\n\n#### 2. Identifier (Variable)\n\nThe variable must be initialized with a **string literal** in the same file. The plugin resolves the variable to a static path at compile time.\n\n```jsx\nconst img = \"./imgs/logo.png\";\n}){kind=logo}
\n```\n\n**With interpolation** — converted to runtime URL resolution:\n\n```jsx\n\n// → new URL(`./imgs/${icon}.svg`, import.meta.url).href\n\n![\"logo\"]({require(\"../../../imgs/logo.png\")}){kind=logo}
\n\n```\n\n```jsx\n// with alias: @imgs → ./src/imgs/\n![\"logo\"]({require(\"@imgs/logo.png\")}){kind=logo}
\n```\n\n### Conversion Modes (`translateType`)\n\n| Mode | Description |\n|------|-------------|\n| `import` (default) | Hoists static assets to top-level `import` statements |\n| `importMetaUrl` | Converts to `new URL(path, import.meta.url).href`. See [Vite assets docs](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url) |\n\n**`translateType: \"import\"`**\n\nAll resolvable static `require()` calls are replaced with top-level imports.\n\n**`translateType: \"importMetaUrl\"`**\n\nUses `import.meta.url` instead of `import`. Supports on-demand loading — the original code is **not removed** at build time.\n\nOnly works when the asset variable exists before rendering:\n\n```jsx\nlet imgUrl = process.env.NODE_ENV !== \"development\" ? require(\"../imgs/logo.png\") : null;\n\nreturn <>\n { imgUrl ? 
: null }\n\n```\n\n> Do **not** put the conditional inside `src`, e.g. `src={xx ? require(\"../imgs/logo.png\") : null}`. See [issue #28](https://github.com/wangzongming/vite-plugin-require/issues/28).\n\n### Limitations\n\n| Scenario | Status |\n|----------|--------|\n| Variable assigned a non-literal value | ✗ Cannot resolve |\n| Complex variable reassignment | ✗ Only simple `const x = \"path\"` is supported |\n| `require()` with unsupported argument types | ✗ Throws `Unsupported type: xxx` |\n| `require(new URL(...))` (`MemberExpression`) | ✗ Not implemented yet |\n\n---\n\n## Options\n\nAll options are optional.\n\n#### fileRegex\n\nFiles to transform. Default: `/(.jsx?|.tsx?|.vue)$/`\n\n```js\nvitePluginRequire({ fileRegex: /(.jsx?|.tsx?|.vue)$/ })\n```\n\n#### translateType\n\nConversion mode. Default: `\"import\"`\n\n```js\nvitePluginRequire({ translateType: \"import\" })\nvitePluginRequire({ translateType: \"importMetaUrl\" })\n```\n\n#### log\n\nDebug logger, receives internal transform info.\n\n```js\nvitePluginRequire({ log: (...args) => console.log(...args) })\n```\n\n---\n\n## Demo\n\nSuppose there are `app.jsx` and `imgs` folder in the `src` directory:\n\n```jsx\n// app.jsx\nfunction App() {\n const img2 = \"./img/1.png\";\n const img3_1 = \"./img/\";\n const img3_2 = \"./1/\";\n const icon = \"home\";\n\n return (\n \n\n {/* Variable */}\n \n \n```\n\n---\n\n## FAQ\n\n### 1. vitePluginRequire is not a function\n\n```js\nimport vitePluginRequire from \"vite-plugin-require\";\n\nexport default {\n\tplugins: [\n vitePluginRequire.default()\n\t],\n};\n```\n\n### 2. Unsupported type: ConditionalExpression / TemplateLiteral\n\nUpgrade to the latest version. Both are supported since v1.3.0+.\n","readmeFilename":"readme.md"}