Rollup 打包图片资源,需要如何配置才能正常使用?

来源:1-3 2022年更新说明

中拓UI前端

2023-04-17

老师,Rollup打包图片如何处理?如果我使用rollup-plugin-copy这个插件
源码中使用

import logo from '../assets/img/logo.png'

打包会直接报错
[!] (plugin rpt2) RollupError: Unexpected character ‘�’ (Note that you need plugins to import files that are not JavaScript)
src/assets/img/login_logo.png
无法识别非JS模块。如果我使用 @rollup/plugin-url 这个插件。
代码会被编译成

import logo from '../src/assets/img/logo.png.js'

然后这个js文件下面就是到处一个路劲的变量

这样我在使用组件库的时候,仅仅只会当成一个常量使用。而不是通过import去查找,导致页面上找不到这个路劲下的图片。

请问老师这种情况要怎么处理呢?

写回答

1回答

张轩

2023-04-18

同学你好

在 Rollup 中处理图片资源,可以使用 rollup-plugin-image 插件。该插件可以将图片资源转换为 base64 编码或文件路径,并将其打包到输出文件中。

地址是:https://www.npmjs.com/package/@rollup/plugin-image

文档中有详细的用法,可以看下是否能满足你的需求。

0
0

React18+TS高仿AntD从零到一打造组件库

设计,开发,测试,发布再到 CI/CD,从0到1造轮子

2123 学习 · 959 问题

查看课程