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

Question

老师，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去查找，导致页面上找不到这个路劲下的图片。

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

Answer 1

张轩 2023-04-18 16:26:29

同学你好

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

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

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