如何通过url-loader在typescript + react（rails5 + webpacker）中加载base64字符串中的图像

Question

示例repo https://github.com/github0013/typescript_react

我需要在base64字符串嵌入到标记中加载图像，但导入图像文件会引发此错误。

TS2307：找不到模块'./Octocat.jpg'。

https://github.com/github0013/typescript_react/commit/6670f3ca74404007ad1ed6e4ab0d111f547ee75d

我仍然是打字稿，webpack和反应的新手，我确信我很困惑的打字稿import和webpack的。

如何为图片启用url-loader？这甚至有效吗？ https://github.com/github0013/typescript_react/blob/master/config/webpack/environment.js

-
我确实试过了require，但它只会返回图片的路径，而不是base64 stirng。

// global.d.ts
declare function require(string): string;

Answer 1

解决..

webpacker 3.0.2已经有了图像文件的加载器 https://github.com/rails/webpacker/tree/v3.0.2/package/loaders https://github.com/rails/webpacker/blob/v3.0.2/package/loaders/file.js

rails environment.loaders中的

config/webpack/environment.js只是一张地图，而jpeg png gif位于file加载器中。 https://github.com/github0013/typescript_react/commit/dc97c3aa9f17bc4f3b0210a426aac27092c5ae7f#diff-41713e6b116dc5cc2bbea556a85db322R3

如此覆盖文件加载器的测试，然后添加自己的图像加载器将url-loader用于jpeg png gif https://github.com/github0013/typescript_react/commit/dc97c3aa9f17bc4f3b0210a426aac27092c5ae7f

添加加载器后，typescript中的常规图像require将返回base64字符串。