我有 ReactJS 應用程式，但我的 svg 有問題。雖然我在開發階段一切正常，但現在我試圖刺激它并且我的 svg 影像沒有顯示。這是我的應用程式的根源：
.
├── src
│ ├── app.js (entrypoint)
│ ├── pages
│ │ └── service
│ │ └ backButton.jsx
│ └── images
│ └ back.svg
└── webpack.config.js
我的webpack.config.js：
const webpack = require('webpack');
var path = require('path');
require('babel-polyfill');
const Dotenv = require('dotenv-webpack');
require('dotenv').config({path: './.env'});
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ['babel-polyfill', './src/app.js'],
output:{
path: path.resolve(__dirname, './public'),
publicPath: '/public/',
filename: "bundle.js"
},
devServer: {
historyApiFallback: true,
port: 5500,
open: true
},
plugins: [
new Dotenv(),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env)
})
],
module:{
rules:[
{
test: /\.jsx?$/, // Babel loader.
exclude: /(node_modules)/,
loader: "babel-loader",
options:{
presets:["@babel/preset-env", "@babel/preset-react"]
}
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.svg$/,
loader: 'raw-loader'
}
]
}
}
以及嘗試使用 svg的backButton.jsx 的一部分：
...
return (
<img src="../../src/images/back.svg"/>
)
...
所有其他 svg 影像也不會顯示。我不知道該怎么辦，我試過其他一些裝載機，但結果是一樣的。
uj5u.com熱心網友回復：
您不能直接從 jsx 中的資產檔案夾使用 svg。您必須從資產檔案夾中匯入它
import yourSvg from 'your svg path';
...
return (
<img src={yourSvg} />
)
...
你也可以在這里查看
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/379567.html