Meta tag with image url content

[roadmanfong]

I 'd like to add something like

 <meta property="og:image" content="./src/images/cover.png" />
 <meta name="twitter:image" content="./src/images/cover.png" />

I notice that it didn't handle image inside the meta tag.
And I found a solution here
webpack/html-loader#17 (comment)

 <meta property="og:image" content="${require(`./src/images/cover.png`)}" />
 <meta name="twitter:image" content="${require(`./src/images/cover.png`)}" />

All we have to do is minor change in html loader setting
loader: 'html?interpolate=require',

roadmanfong@48bb6cf

[gaearon]

Thanks for the suggestion.
I’m on the fence about the interpolate syntax but I’d like to keep this open and figure out a cohesive solution for this and related problems in a future release, so reopening.

[kahneraja]

i'm super keen on resolving this. anyone got some tips or direction i can take here?

[kahneraja]

I've noticed the following happens.

on build <link rel="shortcut icon" href="./src/favicon.ico"> becomes ><link rel="shortcut icon" href="/static/media/favicon.f9ba6907.ico">.

which is perfect. I want to extend that to other meta tags like <meta name="twitter:image:src" content="./src/title.jpg">

if anyone can point in the direction to PR that i'll do it :)

[gaearon]

The way I want it to work is that any attribute value starting with ./ should be processed via file-loader. But this needs to be implemented as a feature in html-loader and I’m not sure if they’re interested.

[kahneraja]

How does <link rel="shortcut icon" href="./src/favicon.ico"> pick up required build change?

@gaearon - Is that something covered off in file-loader?

[gaearon]

No, it’s part of html-loader (usage).

We currently specify link:href as attrs option so that’s the only thing it picks up.
I want it to pick up any attribute value starting with ./: webpack/html-loader#17 (comment).

Relevant code is pretty small: https://github.com/webpack/html-loader/blob/master/index.js

[kahneraja]

thanks @gaearon i'll look into it :)

[kahneraja]

ah. i know understand we are looking at how this config gets picked up...
https://github.com/facebookincubator/create-react-app/blob/master/config/webpack.config.prod.js#L173

[gaearon]

Yep, that’s where it is.

[kahneraja]

do we want to take a href-content place holder attribute approach?

<meta name="twitter:image:src" href-content="./src/title.jpg">
becomes
<meta name="twitter:image:src" content="http://wetrumphate.com/static/media/title.3c0fcf5e.jpg">

[kahneraja]

hmm. i guess the idea of content starting with "./" is sort of better.

[gaearon]

I can’t really imagine why somebody would want to start their attributes with ./ and not mean a local file, so I think it will be safe to just assume that’s the intention.