Javascript 如何使用加载的SVG模块_Javascript_Reactjs_Typescript_Svg_Webpack

Javascript 如何使用加载的SVG模块

javascript reactjs typescript svg webpack

Javascript 如何使用加载的SVG模块,javascript,reactjs,typescript,svg,webpack,Javascript,Reactjs,Typescript,Svg,Webpack,我已设置webpack，以便将SVG文件加载到我的create react应用程序的TSX端口中，根据：然而，当我尝试使用它如下，我得到一个讨厌的404 <img src={logo} className="App-logo" alt="logo" /> 这是有道理的——我需要svg，所以它作为一个模块加载，你不能很好地利用它来创建一个srcURL 也就是说，如何通过require将SVG作为模块加载到TSX文件中？这可能吗？我知道上面的答

我已设置webpack，以便将SVG文件加载到我的create react应用程序的TSX端口中，根据：

然而，当我尝试使用它如下，我得到一个讨厌的404

<img src={logo} className="App-logo" alt="logo" />

这是有道理的——我需要svg，所以它作为一个模块加载，你不能很好地利用它来创建一个

src

URL

也就是说，如何通过

require

将SVG作为模块加载到TSX文件中？这可能吗？我知道上面的答案被指定的更流行的方法否决了，但我想看看这个选项是否也能起作用。因为如果不是一千种剥猫皮的方法，编程是什么？或者开枪打自己的脚…

如果在svg文件上使用require，那么变量将是一个类似于

…

的字符串。对于简单html，您可以通过字符串插值添加它。也可以与JSX一起使用。

如果您在svg文件上使用require，那么变量将是类似于

…

的字符串。对于简单html，您可以通过字符串插值添加它。可能也适用于JSX。

出于某种原因，其他扩展名的替代类型文件似乎不适用于我。取而代之的是，我发现（通过一个相当全新的CRA回购协议）只是将其大致更改为如下所示：

const{default:logo}=require（'./logo.svg'）作为{default:string}；

这不是一个很好的情况，但您可以通过执行以下操作来完成对其他资产的需求：

函数requireSet（src:string）：{default:string}{
退货要求（src）；
}

我能看到的唯一缺点是，你会收到恼人的警告，我找不到抑制的方法。原因是这是一个直接来自webpack的警告，所以尽管它会说尝试使用

//eslint禁用下一行

，但它不会起作用。如果没有其他警告或错误，那么您应该可以使用这些资产

更新1 看看我上面提到的警告，警告的原因可能是因为webpack不知道如何解析这样的动态资产，这可能意味着它吸引了更多的资源。如果您需要进一步抑制该警告，可以通过在其中放入带参数的插值字符串来实现，不过如果webpack随后会检测到何时执行该操作并导致相同的警告，我也不会感到惊讶。维护人员的一个建议是对可能需要的文件增加一些特殊性，例如对特定路径进行硬编码。您可以添加一个包含徽标的文件夹，例如

assets

，并重构包装函数以指向该文件夹：

函数requireSet（src:string）：{default:string}{
返回要求（`./assets/${src}`）；
}

上面的代码将包含的资产仅限于

assets

文件夹和任何子目录

我所看到的问题是，这些解决方案中的任何一个都不是很好，因为它可能会开始干扰webpack的依赖项解析，这可能会有问题。更好的选择（如果可行的话）是将

assets.d.ts

文件包含在

tsconfig.json

中，正如在中提到的那样，出于某种原因，其他扩展名的替代类型文件似乎对我不起作用。取而代之的是，我发现（通过一个相当全新的CRA回购协议）只是将其大致更改为如下所示：

const{default:logo}=require（'./logo.svg'）作为{default:string}；