how to include an image in the build of a multi block plugin

My WP plugin should show some (default) images in the font-end and editor UI. However, the URL generated with my code, refers to the build folder, while the images are not.

This is my structure:

lucy-recipe-blocks
-build
-src
--images
---meal-type-dinner.png
--blocks
---lucy-meal-type-block
----block.json
----edit.js
----index.js
----render.php
----save.js
-webpack.config.js
-lucy-recipe-blocks.php
-package.json

This is the code in render.php:

<?php
  // $image_url = esc_url('/wp-content/plugins/lucy-recipe-blocks/src/images/meal-type-dinner.jpg');
  $image_url = esc_url(plugin_dir_url( __FILE__ ) . 'images/meal-type-dinner.jpg');
  $alt_text = esc_attr('Meal type image');
  $category_title = esc_html('Meal Type Name');
?>

<button class="lucy-meal-type">
  <img src="<?php echo $image_url; ?>" alt="<?php echo $alt_text; ?>" class="lucy-meal-type__image">
  <div class="lucy-meal-type__namespace">
    <label class="lucy-meal-type__text"><?php echo $category_title; ?></label>
  </div>
</button>

This is the webpack.config.js content:

const path = require('path');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const { merge } = require('webpack-merge');

module.exports = merge(defaultConfig, {
  entry: {
    'lucy-meal-type-block': './src/blocks/lucy-meal-type-block/index.js',
    // Add more blocks as needed
  },
  output: {
    filename: '[name]/index.js',
    path: path.resolve(__dirname, 'build/blocks'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: '../images/',
            },
          },
        ],
      },
    ],
  },
});

Registratie in lucy-recipe-blocks:

function register_lucy_recipe_blocks() {
  $custom_blocks = array(
    'lucy-meal-type-block',
    'lucy-rating-block',
    'lucy-review-card-block'
  );

  foreach ($custom_blocks as $block) {
    register_block_type_from_metadata( __DIR__ . '/build/blocks/' . $block );
  }
}
add_action( 'init', 'register_lucy_recipe_blocks' );

package.json:

{
    "name": "lucy-recipe-blocks",
    "version": "0.1.0",
    "description": "A WordPress plugin that provides custom recipe blocks for creating and displaying recipes in posts and pages.",
    "author": "The WordPress Contributors",
    "license": "GPL-2.0-or-later",
    "main": "build/index.js",
    "scripts": {
        "build": "wp-scripts build --webpack-copy-php --config webpack.config.js",
        "format": "wp-scripts format",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "packages-update": "wp-scripts packages-update",
        "plugin-zip": "wp-scripts plugin-zip",
        "start": "wp-scripts start --webpack-copy-php --config webpack.config.js"
    },
    "dependencies": {
        "@wordpress/i18n": "^3.0.0",
        "@wordpress/blocks": "^12.0.0",
        "@wordpress/block-editor": "^12.0.0"
    },
    "devDependencies": {
        "@babel/core": "^7.26.0",
        "@babel/preset-env": "^7.26.0",
        "@babel/preset-react": "^7.25.9",
        "@babel/preset-typescript": "^7.26.0",
        "@wordpress/babel-preset-default": "^8.10.0",
        "@wordpress/scripts": "^30.3.0",
        "babel-loader": "^9.2.1",
        "css-loader": "^7.1.2",
        "file-loader": "^6.2.0",
        "sass-loader": "^16.0.2",
        "style-loader": "^4.0.0",
        "webpack": "^5.95.0",
        "webpack-cli": "^5.1.4"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }
}

But the build gives no errors anymore, but I do not have the desired result. lucy-mealtype-block css files are in the build folder and the lucy-mealtype-block folder as well instead of in the blocks folder. And I still do not have the images folder in the build:

When using a static URL (commented out in the code shown) and I remove the webpack.config.js, it works. When I manually copy the image and folder to the build, it works with the dynamic link code. But that is obviously not desired.

I know I`m missing something obvious here....but what? Does it have to do with the fact I'm working with a multi block plugin setup? I would really appreciate feedback.