typescript - Comment puis-je utiliser des fichiers image comme source <img> en utilisant Rollup comme bundler ?

Dans mon code source, ce chemin d'importation est correct :

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

Mais le chemin relatif change pendant le processus de regroupement. Comment puis-je faire en sorte que le code continue de fonctionner après le regroupement ?

Je pense que si mon projet était en JS pur, je pourrais utiliser @rollup/plugin-image. Mais je n'ai pas réussi à le faire fonctionner dans mon projet Typescript.

Lorsque j'essaie de l'utiliser comme décrit dans la documentation, j'obtiens l'erreur suivante dans mon projet :

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

En lisant quelques autres discussions sur ce sujet, j'ai essayé de résoudre ce problème en ajoutant un fichier types.d.ts à mon projet :

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

Mais cela n'a pas fait de différence. L'erreur TypeScript reste.

MODIFIER :

Ajouter quelques informations

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)