如何在 TypeScript 中為圖像添加路徑別名？

Question

我在tsconfig.json中配置了paths 。 除了導入svg和png等資產文件外，一切正常。

這是我在tsconfig.json中的paths

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@components": ["./src/components"],
      "@app/*": ["./src/app/*"],
      "static": ["static/*"]
    },
    ...
}

這里我如何導入：

import imageAdd from "static/images/image-add.png";
import circleIcon from "static/icons/circle-close.svg"

Answer 1

將"static": ["static/*"]替換為"static/*": ["static/*"]

Answer 2

這不是一個確切的答案，但是，為什么我需要與無法解決的任務作斗爭。 特別是，使用這種imports而不是使用傳統進口產品並沒有太大的利潤。

<img src="../../../static/icons/circle-close.svg" />

是的，它實際上打破了這個問題的意義，但如果路徑別名不會在圖像中使用，沒有人會死。

如果有人知道正確答案，請分享。

Answer 3

最后，解決了。 需要添加一些d.ts文件。 例如。 index.d.ts的內容：

declare module "*.png";
declare module "*.jpg";

轉到tsconfig.json文件並將此文件添加到include后：

  "include": ["images.d.ts", <other includes>]

可能，您需要安裝file-loader 。 我使用的是 gatsby，所以我不需要配置任何東西