如何使用加载的 SVG 模块 [英] How to Use Loaded SVG Module
问题描述
根据 ，但我想看看这个选项是否也能工作.因为如果不是一千种给猫剥皮的方法，编程是什么?或者用脚射击自己...
出于某种原因，其他扩展的替代类型文件似乎对我不起作用.相反，我发现(使用相当全新的 CRA 回购)只是将其更改为大致如下所示:
const { default: logo } = require('./logo.svg') as { default: string };那里的情况不是很好，但是您可以通过执行以下操作来包装需要其他资产:
function requireAsset(src: string): { default: string } {返回要求(src)；}我能看到的唯一缺点是您会收到令人讨厌的警告，我无法找到抑制的方法.原因是它是直接来自 webpack 的警告，所以虽然它会说尝试使用 //eslint-disable-next-line，但它不会起作用.如果没有其他警告或错误，那么您应该可以专门处理资产.
更新 1
调查围绕我上面提到的警告的一个问题，原因是警告可能源于 webpack 不知道如何解决这样的动态资产的事实，这可能意味着它拉入了超出应有的范围.如果您需要进一步抑制警告，可以通过在其中放置一个带有参数的内插字符串，尽管如果 webpack 会检测到何时执行此操作并导致相同的警告，我不会感到惊讶.维护者的建议之一是添加一些关于它可能需要什么文件的特殊性，例如硬编码特定路径.您可能会添加一个文件夹，例如 assets ，其中包含徽标并重构包装函数以指向该文件夹:
function requireAsset(src: string): { default: string} {return require(`./assets/${src}`);}上面的代码会将包含的资源限制在 assets 文件夹和任何子目录中.
我所看到的问题是，这些解决方法中的任何一个都不是那么好，因为它可能会开始与 webpack 的依赖项解析混淆，这可能是有问题的.更好的选择(如果可行)是将 assets.d.ts 文件包含在 tsconfig.json 中，并在 相关问题.
I have set up webpack to load SVG files into my TSX port of the create-react-app, per this answer:
const logo = require('./logo.svg');
However, when I try to use it as follows I get a nasty 404.
<img src={logo} className="App-logo" alt="logo" />
Failed to load resource: the server responded with a status of 404 () [object%20Module]:1
This makes sense - I require the svg, so it loads as a module, and you can't jolly well make a src URL out of that.
That being said, how do I use an SVG loaded into a TSX file as a module via require? Is this possible? I am aware the above answer is outvoted by the more popular approach specified here, but I want to see if this option can work as well. Because what is programming if not a thousand ways to skin a cat? Or shoot yourself in the foot...
For some reason, the alternate type file for other extensions didn't seem to work for me. Instead, what I've found (with a fairly brand-spankin'-new CRA repo) was just change it to look roughly like the following:
const { default: logo } = require('./logo.svg') as { default: string };
It's not a great situation there, but you could potentially wrap requiring other assets by doing something like:
function requireAsset(src: string): { default: string } {
return require(src);
}
The only drawback that I can see is that you'll get annoying warnings that I can't find a way to suppress. The reason for that is that it's a warning straight from webpack, so though it will say to try to use // eslint-disable-next-line, it will not work. If there are no other warnings or errors, then you should be fine with the assets specifically.
Update 1
Looking into an issue surrounding the warning I mentioned above, the reason for the warning might stem from the fact that webpack doesn't know how to resolve a dynamic asset like that, which might mean that it pulls in more than it should. If you need to suppress the warning further, it is possible by putting an interpolated string with the parameter in it, though I'd not be surprised if webpack would then detect when this is being done and result in the same warning. One of the suggestions from the maintainers is to add some specificity as to what file it might require, such as hard-coding a specific path. You could potentially add a folder such as assets with the logo in it and refactor the wrapper function to point to that folder:
function requireAsset(src: string): { default: string} {
return require(`./assets/${src}`);
}
The above code would restrict the included assets to just the assets folder and any subdirectories.
The problem as I see it is that any of these workarounds aren't really that great because it might start to mess with the dependency resolution with webpack and that could be problematic. The better option (if it works) would be to have that assets.d.ts file that's included in the tsconfig.json and as mentioned in the related question.
这篇关于如何使用加载的 SVG 模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
