像在 TypeScript 中一样导入图像答案

【问题标题】：Import images like in TypeScript像在 TypeScript 中一样导入图像
【发布时间】：2021-03-28 05:23:10
【问题描述】：

在 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 编译器执行此“图像导入”。

参考文献

【问题讨论】：

转换导入模块说明符的是 Webpack（或其他有能力的捆绑器），而不是 TypeScript 编译器本身。 Wildcard module declarations 让tsc 忽略这些导入，因此不会发出编译错误。

【解决方案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;

【讨论】：