How to resolve an asset path when using HTML template in JavaScript

[hqw567]

Current behaviour

The relative paths of src files in HTML templates cannot be resolved correctly in JavaScript.

const aiHtml = `
<img
  class="w-7 h-7 sm:w-10 sm:h-10 rounded-full mr-2 sm:mr-4 shrink-0"
  src="../../../assets/images/chat-ai.png"
  alt="" />
`;

// or
const aiHtml = `
<img
  class="w-7 h-7 sm:w-10 sm:h-10 rounded-full mr-2 sm:mr-4 shrink-0"
  src="@images/chat-ai.png"
  alt="" />
`;

Environment

• OS: Windows
• version of Node.js: 18.16.0
• version of Webpack: 5.87.0
• version of the Plugin: 1.18.0

[webdiscus]

Hello @hqw567,

to resolve the source file in JavaScript use the require or import:

const imageFile = require('@images/chat-ai.png');
// OR
import imageFile from '@images/chat-ai.png';

console.log(imageFile); //  'assets/img/chat-ai.abcd1234.png' <= output filename of the image relative to publicPath

const aiHtml = `
<img
  class="w-7 h-7 sm:w-10 sm:h-10 rounded-full mr-2 sm:mr-4 shrink-0"
  src="${imageFile}"
  alt="" />
`;

If you will to resolve asset files in JavaScript, you must define the publicPath as "/" or "" (undefined or auto does not work):

module.exports = {
  output: {
    publicPath: '', // <== very important when using resolving of files in JavaScript
  }
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|ico|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext]', // <= output filename of the image relative to publicPath
        },
      },
    ]
  }
  ...
}

[hqw567]

Hello @webdiscus ,

Thank you so much for helping me resolve the issue! I am truly grateful for your assistance.

Your solution has been incredibly helpful, and I have successfully resolved the problem. Thank you again for your patience and expertise. 😊