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
文档中有详细的用法,可以看下是否能满足你的需求。
00
相似问题