gpt4 book ai didi

svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)

转载 作者:行者123 更新时间:2023-12-05 06:07:54 34 4
gpt4 key购买 nike

我使用 require 的 SVG 没有显示。

在我的终端中,svg Assets 被发出并且路径在我的 html 中正确设置。

<img src="/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg">

但是,SVG 不会显示,而其他格式(如 jpg 或 png)可以显示。我尝试打开原始 svg 文件,它确实有效。当我检查发出的 svg Assets 并像这样在浏览器中加载它时:localhost:8080/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg,我得到了这个解析错误 : enter image description here

这就是我在 pug 文件中使用 svg 的方式

img(src=require('../../assets/img/brand-illustration.svg').default)

webpack 配置

module.exports = {
entry: {
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "../build"),
filename: "[name].bundle.js",
publicPath: '/'
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}, {
test: /\.pug$/,
use: ["pug-loader"]
},
{
test: /\.(png|svg|jpe?g|gif|webp)$/,
use: [
{
loader: "file-loader",
options: {
limit: 10000,
outputPath: 'images',
name: '[name].[hash].[ext]'
}
},
]
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[hash].[ext]',
outputPath: 'fonts'
}
}]
},
{
test: /\.html$/,
use: {
loader: "html-loader?interpolate",
options: {
attrs: ["img:src", ":data-src"],
minimize: true
}
}
}
]
},
plugins: [
// CleanWebpackPlugin will do some clean up/remove folder before build
// In this case, this plugin will remove 'dist' and 'build' folder before re-build again
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].[contenthash]_[id].css'
}),
new CleanWebpackPlugin(),
// The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '..', '/src/index.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: path.join(__dirname, '..', '/src/about.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'works.html',
template: path.join(__dirname, '..', '/src/works.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
template: path.join(__dirname, '..', '/src/contact.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: '404.html',
template: path.join(__dirname, '..', '/src/404.pug'),
inject: true,
publicPath: '/'
})
].concat(htmlPlugins)
};

开发依赖

    "@babel/core": "^7.7.7",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"brotli-webpack-plugin": "^1.1.0",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.1",
"css-loader": "^3.4.1",
"cssnano": "^4.1.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"pug-html-loader": "^1.1.5",
"pug-loader": "^2.4.0",
"purgecss-webpack-plugin": "^1.6.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"terser-webpack-plugin": "^2.3.1",
"url-loader": "^4.1.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^5.7.0"

最佳答案

删除 file-loader 用法并在 Webpack 配置中添加 type: 'asset/resource'

关于svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65284602/

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