How to reference different sizes in a template

Responsive-loader is generating all my images beautifully with the correct names and sizes, but I can’t figure out how to reference other sizes than the default (smallest one) in my template!

// webpack.config file
...
{
  test: /\.(jpe?g|png)$/i,
  loader: 'responsive-loader',
  options: {
    adapter: require('responsive-loader/sharp'),
    sizes: [600, 1200],
    placeholder: true,
    placeholderSize: 50,
    name: '/assets/img/[hash]-[width].[ext]'
  }
},
...

And this is how I’m referencing the images in my template html

  <img src="${require('./assets/img/image_0.jpg')}" alt="">

This gives me the 600px wide image and I would like to get different images based on screen size. Any pointers?

[bparticle]

I found the issue (and it cost me many hours so I hope this may help anyone in the same situation). My images were not displayed due to the preceding slash that I put in the responsive-loader configuration (see previous code example). Also I changed the way I implement the loader in the vue-cli setup. This setup has fixed my problem:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const imgRule = config.module.rule('images');
    imgRule.uses.clear();
    imgRule
    .use('responsive-loader')
    .loader('responsive-loader')
    .options({
      adapter: require('responsive-loader/sharp'),
      sizes: [600, 1200],
      placeholder: true,
      placeholderSize: 50,
      name: 'assets/img/[hash]-[width].[ext]'
    });
  }
}

So name: ‘assets/img/[hash]-[width].[ext]’ instead of name: ‘/assets/img/[hash]-[width].[ext]’. This is not a vue-cli specific fix so I think it is useful to post back my solution.

[brettinternet]

For other templates using html-loader this can be accomplished by using multiple source elements. Here’s a pug example:

picture
    source(media='(min-width: 1024px)', srcset=`${src}?size=1280`)
    source(media='(min-width: 768px)', srcset=`${src}?size=1024`)
    source(media='(min-width: 640px)', srcset=`${src}?size=768`)
    source(media='(min-width: 481px)', srcset=`${src}?size=640`)
    img(src=`${src}?size=481`, loading='lazy', alt=alt)

Multiple source elements are required in this case since html-loader won’t transform a single srcset with multiple target resolutions.