How do I configure webpack's asset resource module so that url isn't weird?-CodePudding

I'm trying the new asset module on webpack 5.

Here's how I set it up:

output: {
 path: path.resolve(__dirname, './build'),
 assetModuleFilename: 'static/images/[name][ext]',
 clean: true,
},
...
module: {
 rules: [
   ...
   {
     test: /\.(png|jpe?g|gif)$/i,
     type: 'asset/resource',
   },

And here's the code:

import imageUrl from './background.jpg';

const styles = {
  backgroundImage: `url(${imageUrl})`,
};

When I run the code, here's what I get:

<div style="background-image: url("http://localhost:3000/static/js/../../static/images/planning.jpg");">
</div>

Is there any way to get rid of this ../../?

CodePudding user response：

I realized later that the generated path started with "..static/js" which is not the url for the asset module.

That lead me into the real issue and the solution was to add publicPath to the output configuration of webpack:

...
output: {
  path: path.resolve(__dirname, 'build'),
  publicPath: '/',
  assetModuleFilename: 'static/images/[name][ext]',
  clean: true,
},
...