像在 TypeScript 中一样导入图像

Question

在 TypeScript 中，有一种技术可以 import 图像作为 string。

importTypeScript源码中的图片文件，

import spinner from 'assets/loading_spinner@2x.png';

然后在tsc编译器生成的.js中，会有这样一行

var spinner = "data:image/png;base64,iVBORw0KGgoAAA.....";

我们如何在 PureScript 中完成同样的事情？通常的 foreign module 技术不会起作用，因为它是 tsc 编译器执行此“图像导入”。

参考资料

https://www.typescriptlang.org/docs/handbook/release-notes/overview.html#untyped-imports

https://webpack.js.org/guides/typescript/#importing-other-assets

Answer 1

这适用于 rollup.js 和适当配置的 @rollup/plugin-url

Assets.purs

module Assets where
foreign import spinner :: String

Assets.js

"use strict";
exports.spinner = require('assets/spinner.png').default;