4

我用 create-react-app 创建了一个简单的应用程序。这会为 svg 文件配置 webpack 加载器以复制文件并将公共文件放入常量中。所以下面的代码

import mysvg from "./img/my.svg";
console.log(mysvg)

打印/static/media/my.svg。没关系。

但是当在代码和框中编辑/运行同一个项目时，它会尝试读取 svg 文件（例如，如果 ReactComponent 不是正确的 svg，则打印有关 ReactComponent 的错误），并使处理方式有所不同。显然，我可以改用“公共”文件夹，但我想使用生产构建等的哈希功能。

所以我的问题是，我怎样才能允许使用相同的机制在代码和框中获取解析 url 路径（例如对 img src 有效）并使用默认的 create-react-app 配置？

4

3 回答 3

1

来自代码沙盒团队的回答：这是在他们的 github 存储库上跟踪的一个已知问题。

于 2020-04-14T10:10:16.327 回答
1

我做了一些挖掘，我认为这绝对是codeandbox的一个错误。

当我们使用.png图像时，字符串路径如下所示：

path: https://uploads.codesandbox.io/uploads/user/ff71cfab-643a-41c7-8358-d13e8ce686c9/U6zD-unsplash1.png

但是当我们使用 SVG 时，事情就失败了。

在他们的 github repo 上打开了一些类似的问题：#1664，#3825。

维护者说它svg-react-loader包含在 CRA v2 模板中，您可以将它们导入为ReactComponent，我假设这就是您最初所说的。我认为这就是导致svg文件被代码沙盒区别对待的原因。

现在，我想你可以做这个 hacky 解决方法：

import mysvg from "!raw-loader!./img/my.svg.txt";

// inside render
<span dangerouslySetInnerHTML={{ __html: mysvg }} />

沙箱在这里

您需要添加raw-loader为依赖项并将文件重命名为.txt扩展名，这样它就不会像.svg.

从长远来看，我认为我们能做的最好的就是参与#3825并希望这可以通过codesandbox 得到解决。

于 2020-04-13T18:01:26.357 回答
0

如果你想使用 svg 图像，只将它们作为 React 组件导入，像这样，import {ReactComponent as MySvg} from './img/my.svg'通常总是有效的。还有其他方法，但我认为这是最简单的方法。查看我的解决方案 - myVersionOfCodesandbox

于 2020-04-14T03:47:26.690 回答