gpt4 book ai didi

javascript - 尝试使用 raw-loader 加载 svg 时出现包错误

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:38:03 25 4
gpt4 key购买 nike

我的目标是使用 raw-loader 将 svg 作为原始字符串读入,然后使用 dangerouslySetInnerHTML 将此 svg 字符串添加到 div,从而呈现 svg。但是,我在导入 svg 时遇到了问题。我在控制台中收到以下神秘错误:“Uncaught SyntaxError: Unexpected string”。该错误似乎来自 bundle.js。当我单击它以了解更多信息时,它突出显示的行是

/* harmony default export */ __webpack_exports__["default"] = (undefined"<svg width=\"36\" height=\"36\" viewBox=\"0 0 40 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" fill=\"#2996CC\"/>\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" stroke=\"#2996CC\" stroke-width=\"0.434211\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");

因为我使用的是 webpack(版本 4.39.2),所以我必须编写一个规则来导入 svgs。我使用的规则是:


{ test: /\.svg$/, loader: "raw-loader" },

然后在 .jsx 文件中(我使用的是 reactjs),我使用


import sendIcon from "./SVGs/Plane.svg";

实际的 div 看起来像

<div
className="RefreshIcon"
dangerouslySetInnerHTML={{ __html: planeIcon }}
/>

有趣的是,如果我在编译之前运行 rm -rf node_modules 那么一切都很好。但是,这似乎很老套,我想尽可能避免使用该解决方案。我把它包括在内只是因为它可以帮助深入了解主要问题是什么。

我希望看到 svg 正确显示,但整个屏幕除了“正在加载”文本外都是清晰的,我在控制台中收到上述错误。

最佳答案

Svg 应该与文件加载器一起使用

module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}

您可以查看我的完整配置here

关于javascript - 尝试使用 raw-loader 加载 svg 时出现包错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57517291/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com