时间戳

首页 > 解决方案 > Rollup + Typescript + 将图片加载为 base64

typescript - Rollup + Typescript + 将图片加载为 base64

问题描述

尝试使用 Rollup 预加载图像时遇到问题。所有应该起作用的废话都不起作用，不知道为什么。有没有人设法使它工作？这是我在 rollup.congig.js 中的内容：

import image from 'rollup-plugin-image'
...
plugins: [
        image(),
        json(),
        resolve(),
        commonjs(),
        typescript({
            typescript: require('typescript'),
        }),
        (process.env.BUILD === 'production' ? terser() : {})

这是我在来源中的内容：

import CAR_IMAGE from "../resources/expand.png";

最后我从 rtp2 pluging 得到一个错误，上面写着：

语义错误 TS 2307，找不到模块“../resources/expand.png”

奇怪的是，我与其他各种用于汇总的图像加载插件一样。路径正确，图像在那里。我已经对这个错误发疯了=（（

更新：这是可重现此错误的存储库：

https://github.com/AntonPilyak/rollup-image-bug

更新 2：已创建错误：

https://github.com/rollup/rollup-plugin-url/issues/22

https://github.com/alwayssonlinetxm/rollup-plugin-img/issues/5

https://github.com/rollup/rollup-plugin-image/issues/10

怎么会这么烂？=(((

标签： typescriptrolluprollupjs

解决方案

在 rollup.config.js中用这个包替换rollup-plugin-image包。 并在插件中添加如下内容

plugins: [
image({
  extensions: /\.(png|jpg|jpeg|gif|svg)$/,
  limit: 10000
}),........

declaration.d.ts然后在根项目中创建一个文件名。添加以下片段

declare module '*.png' {
const value: any;
export default value;

}

在您的tsconfig.json中添加此代码段

"include": ["src","src/declaration.d.ts"],

在 CLI 中重新运行汇总。它会工作的！

推荐阅读