How to import image in js files?

[mybardaklar]

How to import image files in JS files? I tried but having problems with path and urls.

[webdiscus]

Hello @mybardaklar,

try please following working simple example:

webpack.config.js the output publicPath must not be auto or undefined:

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '', // to import an image in the JS file, the publicPath must not be auto
  },

  entry: {
    index: './src/index.pug',
  },

  plugins: [
    new PugPlugin({
      js: {
        filename: 'assets/js/[name].[contenthash:8].js',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
      },

      {
        test: /.(png|jpe?g|ico|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext]',
        },
      },
    ],
  },
};

./src/index.pug

html
  head
    script(src=require('./main.js') defer="defer")
  body
  h1 Hello World!

./src/main.js

//const img = require('./image.png'); // OK => output filename like assets/img/image.697ef306.png
import img from './image.png'; // OK => output filename like assets/img/image.697ef306.png

console.log('>> image URL:', img);

[webdiscus]

delete the file-loader and npm run build works fine

[mybardaklar]

Okay but still doesnt work. i updated the repo.

[webdiscus]

wait please, I npm run preview and I see the problem, just mom..

[webdiscus]

Now please try the fixed fork.
It works!

See the changes in:

• webpack.common.js

{
  test: /\.(png|jpe?g|webp)/,
  oneOf: [
	// use responsive-loader in JS file
	{
		issuer: /\.(js|ts)$/,
		type: 'javascript/auto', // <== mega important for usage in JS
		use: {
			loader: 'responsive-loader',
			options: {
				name: 'assets/img/[name].[hash:8]-[width]w[ext]',
			},
		},
	},
	// use responsive-loader in CSS, Pug
	{
		type: 'asset/resource', // <== mega important for usage in Pug/CSS
		use: {
			loader: 'responsive-loader',
			options: {
				name: 'assets/img/[name].[hash:8]-[width]w[ext]',
			},
		},
	},
  ],
},

• src/app/app.js

// ==> load the source image as an object via 'responsive-loader'
import imgFilename from '../assets/img/tiles.png';
...
// ==> the argument is expected as a resolved output filename, NOT source file
loadImage(imgFilename.src).then((image) => {
  ...
});