Support for meta[content] image

[ssougnez]

I'm submitting a feature request

Webpack version:
3.4.1

HTML-Loader version:
0.4.5

Please tell us about your environment:
Windows 10

Current behavior:

Ie have this tag in my index.html page:

<meta property="og:image" content="/assets/img/social-preview.png" />

The image is not copied in the output directory.

Expected/desired behavior:

I expect the image to be picked up by "html-loader" and copied to my output directory but it's not.

Language: TypeScript 2.4.2

Thanks

[michael-ciniawsky]

html-loader doesn't copy assets, you need to use the file-loader and html-loaderwill replace the path with a require('output/path/to/img.png'), not sure about <meta content="path/to/image.png"> but this is fixable in case it doesn't get picked up atm

[ssougnez]

Hello,

I see what you mean, but I think I wasn't clear in the original post, sorry.

If my "index.html" contains an img tag with a src attribute, "html-loader" (I think) will detect it and tell webpack to find the appropriate loader for the file specified in the src attribute, am I wrong ? If I'm correct, "html-loader" should also be able to detect the image specified into meta[property=og:image] and tell webpack to use the appropriate loader.

I already configured the "file-loader" and it works fine, however, as "html-loader" does not recognize the meta property, the "file-loader" cannot be triggered to load the file.

Maybe I didn't understand the goal of "html-loader" and if so, I'm sorry for this post :)

[michael-ciniawsky]

file-loader (Simplified Pseudo Code)

export default function (file) {
  const { path } = this.options.output // webpack.config.js output
  
  file = `${path}/${file}` // Join 
  this.emitFile(file) // Loader API

  // 'output/path/file.ext' (this gets required by html-loader, css-loader, ...)
  return `export default ${file}`
}

input.html

<img src="file.ext">

=> html-loader

module.html

<!-- doesn't work without file-loader exporting the file path as JS Module to require() -->
<img src="${require('output/path/file.ext')}">

Yeah it seems <meta content="path/to/file"> doesn't get picked/parsed up atm, I will try to fix this

[michael-ciniawsky]

posthtml-loader && a plugin adding <meta> or a template function (https://github.com/webpack-contrib/html-loader/releases/tag/v1.0.0-alpha.0)

[brettinternet]

For anyone who has landed here from a search engine, I believe this is the correct method:

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        attributes: {
          list: [
            '...',
            {
              tag: 'meta',
              attribute: 'content',
              type: 'src',
              /**
               * @docs https://github.com/webpack-contrib/html-loader#list
               */
              filter: (_tag, _attribute, attributes, _resourcePath) => {
                if (
                  attributes.property === 'og:image' ||
                  attributes.property === 'twitter:image'
                ) {
                  return true
                }
                return false
              },
            },
          ],
        },
      },
    },
  ],
},

[alexander-akait]

@brettinternet PR welcome