typescript - Hur kan jag använda bildfiler som <img>-källa med Rollup som bundlare?

I min källkod är denna importväg korrekt:

<img src={"../../../../assets/logo.svg"} />

Men den relativa sökvägen förändras under bundlingsprocessen. Hur kan jag göra så att koden fortsätter att fungera efter bundling?

Jag tror att om mitt projekt var ren JS skulle jag kunna använda @rollup/plugin-image. Men jag har inte fått det att fungera i mitt Typescript-projekt.

När jag försöker använda det som beskrivs i dokumentationen får jag följande fel i mitt projekt:

Cannot find module '../../../../assets/logo.svg' or its corresponding type declarations.

Efter att ha läst några andra trådar om detta ämne, har jag försökt åtgärda detta problem genom att lägga till en types.d.ts-fil i mitt projekt:

declare module "*.svg" {
  const content: any;
  export default content;
}

Men det har inte gjort någon skillnad. TypeScript-felet kvarstår.

REDIGERA :

Lägger till lite information

rollup.config.js

import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import image from "@rollup/plugin-image";
import copy from "rollup-plugin-copy";
import { terser } from "rollup-plugin-terser";

const pkg = require("./app/package.json");

const isProd = process.env.NODE_ENV !== "development";

export default [
  {
    input: "./src/renderer/renderer.tsx",
    output: [{ dir: "./app/build", format: "es", sourcemap: isProd ? false : true }],
    plugins: [
      typescript({ tsconfig: isProd ? "./tsconfig.prod.json" : "./tsconfig.dev.json" }),
      resolve({
        mainFields: ["module", "main", "jsnext:main", "browser"],
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      }),
      commonjs(),
      replace({
        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
        // Gets rid of console warning to install React Dev Tools for a better development experience
        __REACT_DEVTOOLS_GLOBAL_HOOK__: "({ isDisabled: true })",
      }),
      isProd && terser(),
      copy({
        targets: [
          {
            src: ["./src/renderer/index.html", "./src/renderer/styles.css"],
            dest: "./app/build",
          },
        ],
      }),
      image(),
    ],
  },
];

tsconfig

{
  "compilerOptions": {
    // Output
    "target": "ESNext",
    "module": "ESNEXT",
    "jsx": "react",
    "noEmit": true,
    // Compile time code checking
    "strict": true,
    // Libraries
    "lib": ["dom", "esnext"],
    // Imports
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": ["dist", "app"]
}

types.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

App.tsx

import logo from "../../../../assets/logo.svg";
// Cannot find module '../../../../assets/logo.svg' or its corresponding type declarations.ts(2307)