如何解决如何使用汇总作为捆绑程序将图像文件用作<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
]
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。