I'm using webpack 5 to bundle an embeddable widget. I can't seem to load an image created on the fly.

const img = document.createElement('img');
img.src = 'assets/doggo.svg';

http://localhost:8080/assets/doggo.svg gives 404

In my webpack.config.js I have the following:

module: {
         rules: [
            // Typecript
            {
               test: /\.ts|\.tsx$/,
               use: 'awesome-typescript-loader',
               include: __dirname
            },
            // Images
            {
               test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
               type: 'asset/resource',
            },
            // Fonts and SVGs
            {
               test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
               type: 'asset/inline',
            },
         ],
      },

Below is my file structure:

├── package.json
├── postcss.config.js
├── src
│   ├── index.ts
│   ├── assets
│   ├── index.html
│   ├── index.ts
│   ├── types.d.ts
│   └── utils
├── tsconfig.json
├── webpack.config.js
└── yarn.lock