Webpack 5 Can't resolve images

I'm building a React app with Webpack 5 but am getting compiler errors trying to load images:

ERROR in ./src/app/component/style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/app/component/style.scss) 8:36-87
Module not found: Error: Can't resolve './images/picture.png' in 'C:\Users\...\src\app\component\'

My project layout:

• src/
  • app/
    • component/
      • app.scss
• dist/
  • ui/
    • images/picture.png (Desired output)
    • index.js (Desired output)
• static/
  • images/
    • picture.png

Webpack:

  output: {
    path: "dist/ui",
    publicPath: "/ui",
    filename: "index.js"
  },
...
      {
        test: /\.png$/,
        type: "asset/resource",
        generator: {
          filename: "images/[hash][ext][query]"
        }
      }
...