I have ReactJS app and I have an issue with my svg's. While I was on the development stage everything works fine, but now I am trying to prod it and my svg images are not shown. Here is the roots of my application:

.
├── src
│   ├── app.js (entrypoint)
│   ├── pages
│   │   └── service
│   │       └  backButton.jsx
│   └── images
│       └ back.svg
└── webpack.config.js

My 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' 
        }
    ]
  }
}

And part of backButton.jsx which is trying to use svg:

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

All the other svg images are not displyed too. I have no idea what to do with, I've tried some other loaders but the result was the same.

CodePudding user response：

You cannot use svg directly from the assets folder in jsx. You have to import it from the assets folder

import yourSvg from 'your svg path';

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

you can also check here