lightbox2 module with webpack results in missing images

Question

Still fairly new to webpack. I am outputting the webpack start js file to wwwroot\assets\js\Dist\start.js This is my webpack file

  const path = require('path');
const outputPath = './wwwroot/assets/js/Dist';
const sourcePath = './WhipoverApp';

module.exports = {
    //this will allow webpack to set certain optimisations
    mode:'development',
    devtool:'eval-source-map',
    entry: sourcePath + '/start.ts',
    module:
    {
        rules: [
            {
                //make sure file is a *.ts and apply ts-loader if it is. Only look in src folder.
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, sourcePath)]
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(svg|jpeg|gif|png|jpg)$/, // lightbox2 requires png and gif images to be imported
                // ensure `node_modules` folder is not excluded
                use: {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[ext]",
                        outputPath: "/Images"
                    }
                }
            }                  
        ]
    },
    resolve: {
        //when we import something it will know how to resolve that file
        extensions: ['.ts', '.js']        
    },
    output: {
        //relative path that tells the dev server where to serve the code from
        publicPath: outputPath,
        filename: "start.js",
        //__dirname is a webpack constant that gives you the current webpack js config location.
        path: path.resolve(__dirname, outputPath)
    }
};

I have imported lightbox2 via NPM and am importing like this in my start.ts file..

import $ from "jquery";
require("bootstrap");//will load all of Bootstrap’s jQuery plugins onto the jQuery object
import AOS from 'aos';
import 'aos/dist/aos.css';
//import 'lightbox2/dist/css/lightbox.min.css';
import { newnav } from './Library/newnav';
import { hoverAnim } from './Library/bs-init';
import { Car } from './Classes/car';
import 'lightbox2/dist/css/lightbox.min.css';
import lightbox from 'lightbox2'

newnav();
AOS.init({ disable: 'mobile' });
hoverAnim();
lightbox;

The lightbox images are ouput to wwwroot\assets\js\Dist\Images no problem in the project, and when it loads in the browser the effect works fine. However the lightbox images (next prev etc) are missing from the browser/server entirely even though it exists in the project.

This results in the browser error wwwroot/assets/js/Dist/Images/prev.png 404 (Not Found)

However the prev.png is there physically in the right place which i see in the visual studio folder structure.

A copy of the images is of course also in node_modules but as I understand it, it should output to my dist folder. Thanks