ReactJS 应用程序不显示 SVG 图像

Question

我有 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' 
        }
    ]
  }
}

backButton.jsx 的一部分正在尝试使用 svg:

...
return (
      <img src="../../src/images/back.svg"/>
  )
...

所有其他 svg 图像也没有显示。我不知道该怎么办，我试过一些其他的装载机，但结果是一样的。

Answer 1

您不能直接从 assets 文件夹中的 jsx 使用 svg。您必须从资产文件夹中导入它

import yourSvg from 'your svg path';

...
return (
  <img src={yourSvg} />
)
...

你也可以查看here

ReactJS 应用程序不显示 SVG 图像

SVG images are not displayed at ReactJS app

reactjs

webpack