html-loader get error when processing empty src in img tags

[mosquito1803]

I'm submitting a bug report

Webpack version:
3.4.1

HTML-Loader version:
0.5.5

Please tell us about your environment:
OSX 10.13.6

Current behavior:

<div class="container"></div>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    var $container = $(".container");

    // this dom is converted from es6, for this page must support ie8, and doing this will get an error Can't resolve './\"\"'
    var dom1 = "<img src=\"\" />";

    $container.append(dom1);

    // this is another example, which will lead to a xxxHTMLLINKxxx link in html
    var dom2 = '<img src="" />';
    
    $container.append(dom2);
</script>

Code above provide two cases:

• first one is code converted from es6, and will result in an error Can't resolve './\"\"'
• second one will become something like <img src="xxxHTMLLINKxxx0.57464132184163710.241630956172443xxx">

Expected/desired behavior:

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

Add the code above in html with a html-loader in webpack.

• What is the expected behavior?

Both the two cases should be <img src=""> after processed by html-loader

• What is the motivation for changing the behavior?

This is found when using jquery-lazyload. Usually I write an img tag with a data-original attribute and sometimes add an empty src, which will result in such a problem. Although it is possible to avoid this by removing the empty source or add a link, I think this should be solved by the loader itself.

• Browser: all

• Language: ES6 & ES5

[roux1max]

The issue about the xxxHTMLLINKxxx part is resolved in the last version : https://github.com/webpack-contrib/html-loader/releases/tag/v1.0.0-alpha.0, maybe it will also solve your other problem.

Use npm i -D html-loader@next to get it ;)

[mosquito1803]

Thanks, I've tried the alpha version but get another error:

Module build failed: ValidationError: HTML Loader Invalid Options
  options['attrs'] is an invalid additional property

And this is my configuration:

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                attrs: ['img:src', 'img:data-original']
            }
        }
    ]
}

Then I remove the attrs in option and see another error:

Html Webpack Plugin:
  Error: Child compilation failed:
  Module parse failed: Octal literal in strict mode (16:22888)
  You may need an appropriate loader to handle this file type.
  |     

I find this is caused by the inline jQuery. I replace it with a cdn url and I'm happy to find the xxxHTMLLINKxxx problem is solved. But the code "<img src=\"\" />" becomes "<img src="" />" in the final html so it gets error.

Overall, the xxxHTMLLINKxxx problem is solved and please see the three points following. Thanks a lot!

• The error options['attrs'] is an invalid additional property
• Get error when use inline minified jQuery with comment in html-webpack-loader ( This will not happen with html-loader version 0.5.5 )
• The code "<img src=\"\" />" in inline JavaScript becomes "<img src="" />"

[roux1max]

Ok, did you try to specify the url options to ignore empty url ?
I never tried it myself but it should work (I think).

Something like:

{
  loader: 'html-loader',
  options: {
    url(url) {
      return url !== '';
    }
  }
}