1

In TypeScript, there is a technique by which one can import an image as a string.

import the image file in TypeScript source code,

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

and then in the .js produced by the tsc compiler, there will be a line like

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

How could we accomplish the same thing in PureScript? The usual foreign module technique won't work, because it's the tsc compiler which does this “image import.”

References

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

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

Webpack & Typescript image import

James Brock
  • 3,236
  • 1
  • 28
  • 33
  • 3
    It is Webpack (or a different capable bundler), that converts import module specifiers, not the TypeScript compiler itself. [Wildcard module declarations](https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations) let `tsc` just ignore these imports, so no compile error is emitted. – ford04 Dec 17 '20 at 14:06

1 Answers1

2

This works with rollup.js and an appropriately configured @rollup/plugin-url

Assets.purs

module Assets where
foreign import spinner :: String

Assets.js

"use strict";
exports.spinner = require('assets/spinner.png').default;
James Brock
  • 3,236
  • 1
  • 28
  • 33