我已经设置了 webpack 来将 SVG 文件加载到我的 create-react-app 的 TSX 端口中，根据这个答案：
const logo = require('./logo.svg');
但是，当我尝试按如下方式使用它时，我得到了一个令人讨厌的 404。
<img src={logo} className="App-logo" alt="logo" />
Failed to load resource: the server responded with a status of 404 () [object%20Module]:1
这是有道理的 - 我require是 svg，所以它作为一个module加载，你不能很好地利用它制作一个srcURL。
话虽如此，我如何使用加载到 TSX 文件中的 SVG 作为module通过require？这可能吗？我知道上面的答案被此处指定的更流行的方法所否决，但我想看看这个选项是否也能工作。因为如果不是一千种给猫剥皮的方法，编程是什么？或者用脚射自己...
如果您在 svg 文件上使用 require，则该变量将是类似<svg>...</svg>. 在简单的 html 的情况下，您可以使用字符串插值添加它。也可以与 JSX 一起使用。
出于某种原因，其他扩展的备用类型文件似乎对我不起作用。相反，我发现（使用相当品牌的全新 CRA 存储库）只是将其更改为大致如下所示：
const { default: logo } = require('./logo.svg') as { default: string };
这不是一个很好的情况，但是您可以通过执行以下操作来包装需要其他资产：
function requireAsset(src: string): { default: string } {
return require(src);
}
我能看到的唯一缺点是您会收到令人讨厌的警告，我无法找到抑制的方法。原因是它是直接来自 webpack 的警告，所以尽管它会说尝试使用// eslint-disable-next-line，但它不会起作用。如果没有其他警告或错误，那么您应该可以专门处理这些资产。
查看我上面提到的警告周围的问题，警告的原因可能源于 webpack 不知道如何解决这样的动态资产的事实，这可能意味着它拉入了超出应有的范围。如果您需要进一步抑制警告，可以通过在其中放置一个带有参数的内插字符串，但如果 webpack 会检测到何时执行此操作并导致相同的警告，我不会感到惊讶。维护者的建议之一是添加一些关于它可能需要什么文件的特殊性，例如硬编码特定路径。您可能会添加一个文件夹，例如assets其中包含徽标的文件夹，并重构包装函数以指向该文件夹：
function requireAsset(src: string): { default: string} {
return require(`./assets/${src}`);
}
上面的代码将包含的资产限制在assets文件夹和任何子目录中。
我所看到的问题是，这些解决方法中的任何一个都不是那么好，因为它可能会开始与 webpack 的依赖项解析混淆，这可能是有问题的。更好的选择（如果有效）是将该assets.d.ts文件包含在tsconfig.json和 中，如相关问题中所述。