gpt4 book ai didi

svg - 无法正确设置 webpack svg-inline-loader。 svg 图像不显示

转载 作者:行者123 更新时间:2023-12-03 19:30:25 25 4
gpt4 key购买 nike

我想加载 svg 图像,所以我下载了 svg-inline-loader。并使用此示例进行配置:Webpack svg-inline-loader .在尝试加载 svg 文件后,我得到了这个。不使用 webpack svg-inline-loader 加载 svg 文件会给我一个错误。有什么想法可以解决吗?

enter image description here

HTML

<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>

我的 Webpack 配置文件.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:{
scripts: "./src/scripts/index.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.html$/,
use: [{ loader: "html-loader", options: { minimize: true } }]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: "url-loader",
options: {
name: "./img/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader",
}
]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-inline-loader',
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};

PackageJson 依赖项:
 "devDependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.1",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},

最佳答案

我知道这个问题已经过去一年多了,但我为 future 登陆这里的人添加了一个答案。svg-inline-loader假设用于使用 svg inline 作为它自己注入(inject)的文件。您想要完成的最好使用url-loadersvg-url-loader ( https://www.npmjs.com/package/svg-url-loader ) 将 svg 转换为 base64,以便您可以在 src-attribute.xml 中使用它。
如果您想同时使用两者,可以将其与以下 oneOf 配置结合使用:

{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'svg-inline-loader'
},
{
exclude: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'url-loader'
}
]
}

关于svg - 无法正确设置 webpack svg-inline-loader。 svg 图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55373021/

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