Typescript path transform not resolving path for images

Question

I am trying to use typescript path transform to allow aliases. Everything works perfectly except when I try to import images. I have provided my tsconfig as well as the compiled output. Any ideas?

I have tried declaring the images using a declaration module but it seems to have no effect on the final output.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "./dist",
    "target": "es5",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "removeComments": true,
    "declaration": true,
    "sourceMap": true,
    "jsx": "react-jsx",
    "typeRoots": ["src/index.d.ts", "node_modules/@types"],
    "plugins": [
      {
        "transform": "typescript-transform-paths"
      }
    ],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "baseUrl": "./",
    "paths": {
      "@pages/*": ["./src/pages/*"],
      "@components/*": ["./src/components/*"],
      "@layout/*": ["./src/layout/*"],
      "@app/*": ["./src/*"],
      "@assets/*": ["./src/assets/*"],
      "@utils/*": ["./src/utils/*"],
      "@utils": ["./src/utils/index.tsx"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

output:

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var user_png_1 = __importDefault(require("@assets/user.png"));
var Text_1 = __importDefault(require("../Text"));
var UserInfo_types_1 = __importDefault(require("./UserInfo.types"));
var UserInfo = function (_a) {
    var username = _a.username, organization = _a.organization, _b = _a.profile_image, profile_image = _b === void 0 ? user_png_1.default : _b;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "user-info" }, { children: [(0, jsx_runtime_1.jsx)("img", { className: "user-info__image", src: profile_image }, void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "user-info__text" }, { children: [(0, jsx_runtime_1.jsx)(Text_1.default, __assign({ lineHeight: 4, fontWeight: 500 }, { children: username }), void 0), (0, jsx_runtime_1.jsx)(Text_1.default, __assign({ lineHeight: 4, color: "grey", fontSize: "11px", fontWeight: 500 }, { children: organization }), void 0)] }), void 0)] }), void 0));
};
exports.default = UserInfo;
//# sourceMappingURL=UserInfo.component.js.map