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

Question

示例回购https://github.com/github0013/typescript_react

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

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

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

我对 typescript、webpack 和 react 还是很陌生，我确信我对 typescript 的 import 和 webpack 感到困惑。

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

--
我确实尝试过require，但它只会返回图像的路径而不是base64搅拌。

// 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

environment.loaders，在 rails 的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

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