Today I am using webpack 5 for a simple website, and I would like to import some images.

However I have run into a problem that I thought would be an easy fix however I ended up sending 4 hours googling to no avail.

I try to put in the image like this. But it doesn't work.

        <img src="../static/test.svg" alt="">

My webpack config contains this...

        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images/',
            },
          },
        ],
      },

After the hours of googling I saw someone say that I must import the photo so I did this in the main.js file I have..

import Icon from '../static/images/test.svg';

But for the life of me I can't figure out how to put it into the HTML part of the website... someone please help. Also I'm not using react.