如何使用汇总作为捆绑程序将图像文件用作<img>源？

问题描述

我是我的源代码，此导入路径正确：

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

但是相对路径在捆绑过程中会发生变化。捆绑后如何使代码继续工作？

我认为，如果我的项目是纯JS，则可以使用@rollup/plugin-image。但是我还没有在我的Typescript项目中使用它。

当我尝试按照文档中的说明使用它时，在我的项目中出现以下错误：

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

通过阅读有关该主题的其他一些主题，我试图通过在项目中添加一个types.d.ts文件来解决此问题：

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

但是这并没有改变。 TypeScript错误仍然存​​在。

编辑：

添加一些信息

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)

解决方法

使用汇总时，您将需要rollup-plugin-image的帮助。

只需将其添加到您的.flexbox { display: flex; justify-content: space-around; flex-wrap: wrap; width: 80%; margin-left: auto; margin-right: auto; } 中即可：

rollup.config.js

然后像这样导入您的svg：

import image from 'rollup-plugin-image';

export default {
  entry: 'src/index.js',dest: 'dist/my-lib.js',plugins: [
    image() // <-- use it here
  ]
};