How to load a relative image URL with webpack 5?

Question

I am using webpack 5 and trying to get it to work with esbuild-loader and ES6 modules.

In the code, I have to load an image's url to pass to some other third-party library. So it needs to be relative to wherever webpack bundles it...

Previously I had an image loading like this...

import * as DEFAULT_POSTER_URL = require("../assets/default-poster.png");

Seemingly working fine, but now when I converted everything from requirejs to ES6 modules, I am trying to load the same URL like this...

import * as DEFAULT_POSTER_URL from "../assets/default-poster.png";

But now I'm getting undefined.

The rules section of my webpack.config.js looks like this...

  rules: [
    {
      test: /\.(ts|tsx)$/,
      loader: "esbuild-loader",
      options: {
        loader: "tsx",
        target: "es2015"
      },
      exclude: /node_modules/
    },
    {
      test: /\.(s([ac])ss)$/,
      include: [path.resolve(__dirname, "./src/app/assets/sass")],
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: "asset/resource"
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: "asset/resource"
    }
  ]
},

Reading the documentation some, I see there is also a asset/inline to load an asset as a URL, but that didn't seem to work when I tried changing my images to load like that.

How to load a relative image URL with webpack 5?

0 Answers0