typescript - Bagaimana saya bisa menggunakan file gambar sebagai sumber <img> menggunakan Rollup sebagai bundler?

Dalam kode sumber saya, jalur impor ini benar:

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

Tetapi jalur relatif berubah selama proses penggabungan. Bagaimana saya bisa membuat kode tetap berfungsi setelah penggabungan?

Saya pikir jika proyek saya menggunakan JS murni, saya bisa menggunakan @rollup/plugin-image. Tapi saya belum berhasil membuatnya bekerja di proyek Typescript saya.

Ketika saya mencoba menggunakannya seperti yang dijelaskan dalam dokumen, saya mendapatkan kesalahan berikut dalam proyek saya:

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

Membaca beberapa thread lain tentang topik ini, saya telah mencoba memperbaiki masalah ini dengan menambahkan file types.d.ts ke proyek saya:

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

Tapi itu tidak membuat perbedaan. Kesalahan TypeScript tetap ada.

EDIT :

Menambahkan beberapa informasi

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)