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

Question

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

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

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

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

我对 typescript、webpack 和 react 还很陌生，我确信我对importtypescript 和 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 字符串。