Images aren't being loaded using "data-srcset", unable to define data-srcset on <source>

[GuillermoCasanova]

• Operating System: Mac OS
• Node Version: 12.9.0
• NPM Version: 6.10.2
• webpack Version: 4.41.5
• html-loader Version: 1.2.1

Expected Behavior

Images using data-srcset on tag for lazysizes should work if including data-srcset in the list of attributes that html-loader checks for.

Actual Behavior

Images aren't being loaded. Compilation happens but when the image is fetched by srcset it can't find it in the assets folder.

Also unable to define it like so, as it returns invalid, saying that data-srcset is not a valid tag on "source":

	{
			        			tag: 'source', 
			        			attribute: 'data-srcset',
			        			type: 'srcset'
			        		}

Code

<picture>
    <source  media="--medium" data-srcset="../../../assets/envelope-01-opti-2.png">
   <img data-src="../../../assets/envelope-01-opti.png" alt="" 
class="lazyload">
</picture>


  config.module = {
		rules: [
				{
					test: /\.js$/,
					exclude: /node_modules/, 
					use: {
						loader: 'babel-loader'
					}
				},	
	      {
	        test: /\.html$/,
	        use: [
	          {
	            loader: "html-loader",
	           	options: { 
			        	attributes: {
			        		list: [
					       {
			        			tag: 'source', 
			        			attribute: 'src-set',
			        			type: 'srcset'
			        		},
			        		{
			        			tag: 'img', 
			        			attribute: 'data-src',
			        			type: 'src'
			        		},
			        		{
			        			tag: 'img', 
			        			attribute: 'src',
			        			type: 'src'
			        		},
			        		{
			        			tag: 'source', 
			        			attribute: 'srcset',
			        			type: 'srcset'
			        		},
			        		{
			        			tag: 'img', 
			        			attribute: 'data-srcset',
			        			type: 'srcset'
			        		}
				        	]
           			}
	           	}
	          }
	        ]
	      },
				{
					test: /\.scss$/,
					use: [
						MiniCssExtractPlugin.loader,
						//'postcss-loader',
						'css-loader',
						'sass-loader',
						]
				},
	      { 
	        test: /\.css$/,
	        use: [ 'style-loader', 
	        	{loader: 'css-loader',
	        	options: {
	        		url: true 
	        	} 
	        }
	        ]
	      },
        {
      	 test: /\.(png|svg|jpg|gif|msi|woff|woff2)$/,
      	 use: {
       	 loader: 'file-loader', 
       	 options: {
       		name: "assets/[name].[contenthash].[ext]",
          esModule: false,
          attrs: ['img:src', 'source:srcset', "img:data-src", "source:data-srcset"]
       	}
       }
      }
		]
	}; 

How Do We Reproduce?

Install htm-loader and file-loader with webpack. Create a picture tag inside an html file with img and source inside of it. Use data-srcset in the source tag for lazysizes to work.

[alexander-akait]

You should use options to enable this (https://github.com/webpack-contrib/html-loader#object), data-srcset it is non standard attribute and don't have specifications

[GuillermoCasanova]

You should use options to enable this (https://github.com/webpack-contrib/html-loader#object), data-srcset it is non standard attribute and don't have specifications

Are you referring that I need to use a filter instead of just another option?

I've tried this with no luck:

{
	tag: 'img', 
	attribute: 'data-srcset',
	type: 'srcset'
}

[alexander-akait]

Should work, anyway I prepare new release #317 and you can use:

  {
	            loader: "html-loader",
	           	options: { 
			        	attributes: {
			        		list: [
					       '...',
			        		{
			        			tag: 'img', 
			        			attribute: 'data-src',
			        			type: 'src'
			        		},
			        		{
			        			tag: 'img', 
			        			attribute: 'data-srcset',
			        			type: 'srcset'
			        		}
				        	]
           			}
	           	}
	          }
	        ]
	      },

[GuillermoCasanova]

I've tried this exactly but it did not work, instead I did this:

	{
			        			tag: 'source', 
			        			attribute: 'data-srcset',
			        			type: 'srcset'
}

Which worked, but then tags using data-srcset or srcset with dynamic images prevent compilation, like this for example:

<picture>
<source media="--medium" data-srcset="{{slide.screenshot.value[0].url  + '?w=600'}}">
<img data-src="{{slide.screenshot.value[0].url  + '?w=460'}}" alt="{{slide.screenshot.value[0].description}}" data-expand="1000" data-height="auto" class="lazyload">
</picture>

Error is:
Bad value for attribute "data-srcset" on element "source":

Thanks

[alexander-akait]

You need to use urlFilter and filter non standard urls

[GuillermoCasanova]

I've tried that as well as I still get the same error. My code below:

         {
           test: /\.html$/,
           use: [
             {
               loader: "html-loader",
              	options: { 
   		        	attributes: {
   		        		list: [
   				       {
   		        			tag: 'source', 
   		        			attribute: 'src-set',
   		        			type: 'srcset'
   		        		},
   		        		{
   		        			tag: 'img', 
   		        			attribute: 'data-src',
   		        			type: 'src'
   		        		},
   		        		{
   		        			tag: 'img', 
   		        			attribute: 'src',
   		        			type: 'src'
   		        		},
   		        		{
   		        			tag: 'source', 
   		        			attribute: 'srcset',
   		        			type: 'srcset'
   		        		},
   		        		{
   		        			tag: 'source', 
   		        			attribute: 'data-srcset',
   		        			type: 'srcset'
   		        		}
   			        	],
   			        	urlFilter: (attribute, value, resourcePath) => {

                                                   console.log(value)
   			        		
   			        		if(/example\.png$/.test(value)) {
   			        			return false 
   			        		}

   			        		return true; 
   			        	}
          			}
              	}
             }
           ]
         }

Currently it doesn't hit the console.log on any URLS with non-standard urls. It immediately errors on any non-standard URLS before the urlFilter function gets to run it seems. Is this related to file-loader instead?