如何使用加载的 SVG 模块答案

【问题标题】：How to Use Loaded SVG Module如何使用加载的 SVG 模块
【发布时间】：2021-03-20 03:29:44
【问题描述】：

根据this answer，我已设置 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，所以它作为一个模块加载，你不能很好地从中创建一个 src URL。

话虽如此，我如何使用通过require 加载到 TSX 文件中的 SVG 作为模块？这可能吗？我知道上述答案被指定为here 的更流行的方法所否决，但我想看看这个选项是否也可以工作。因为如果不是一千种剥猫皮的方法，编程是什么？或者朝自己的脚开枪……

【问题讨论】：

标签： javascript reactjs typescript svg webpack

【解决方案1】：

如果您在 svg 文件上使用 require，则该变量将是类似 <svg>...</svg> 的字符串。在简单 html 的情况下，您可以使用字符串插值添加它。也可以与 JSX 一起使用。

【讨论】：

【解决方案2】：

由于某种原因，其他扩展的备用类型文件似乎对我不起作用。相反，我发现（带有相当全新的 CRA 回购）只是将其更改为大致如下所示：

const { default: logo } = require('./logo.svg') as { default: string };

那里的情况不是很好，但是您可以通过执行以下操作来包装需要其他资产：

function requireAsset(src: string): { default: string } {
    return require(src);
}

我能看到的唯一缺点是您会收到烦人的警告，而我无法找到抑制的方法。原因是它直接来自 webpack 的警告，所以虽然它会说尝试使用// eslint-disable-next-line，但它不起作用。如果没有其他警告或错误，那么您应该可以专门处理这些资产。

更新 1

查看我上面提到的警告周围的an issue，警告的原因可能源于 webpack 不知道如何解析这样的动态资产，这可能意味着它比它拉的更多应该。如果您需要进一步抑制警告，可以通过在其中放置一个带有参数的插值字符串，但如果 webpack 会检测到何时执行此操作并导致相同的警告，我不会感到惊讶。维护者的建议之一是添加一些关于它可能需要什么文件的特殊性，例如对特定路径进行硬编码。您可能会添加一个带有徽标的文件夹，例如 assets，并重构包装函数以指向该文件夹：

function requireAsset(src: string): { default: string} {
    return require(`./assets/${src}`);
}

以上代码会将包含的资产限制为仅assets 文件夹和任何子目录。

我看到的问题是，这些变通方法中的任何一个都不是那么好，因为它可能会开始与 webpack 的依赖关系解析混淆，这可能是有问题的。更好的选择（如果可行的话）是将assets.d.ts 文件包含在tsconfig.json 中，并在related question 中提到。

【讨论】：