Repository navigation
Meta tag with image url content #618
Description
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',
Activity
gaearon commentedon Sep 10, 2016
Thanks for the suggestion.
I’m on the fence about the
interpolatesyntax 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 commentedon Sep 17, 2016
i'm super keen on resolving this. anyone got some tips or direction i can take here?
kahneraja commentedon Sep 17, 2016
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 commentedon Sep 17, 2016
The way I want it to work is that any attribute value starting with
./should be processed viafile-loader. But this needs to be implemented as a feature inhtml-loaderand I’m not sure if they’re interested.kahneraja commentedon Sep 17, 2016
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 commentedon Sep 17, 2016
No, it’s part of
html-loader(usage).We currently specify
link:hrefasattrsoption 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 commentedon Sep 17, 2016
thanks @gaearon i'll look into it :)
kahneraja commentedon Sep 17, 2016
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 commentedon Sep 17, 2016
Yep, that’s where it is.
kahneraja commentedon Sep 17, 2016
do we want to take a
href-contentplace 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 commentedon Sep 17, 2016
hmm. i guess the idea of content starting with "./" is sort of better.
gaearon commentedon Sep 17, 2016
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.10 remaining items
kahneraja commentedon Sep 19, 2016
@gaearon can i just confirm you mean to add 2 separate PRs.
one to make
html-loaderpick up on any meta tag with content like this?and one to remove that config settings from
create-react-app?kahneraja commentedon Sep 19, 2016
@gaearon another thing.
from looking at this test it does sort of look like the
html-loaderguys are keen on sticking with the$(require('...'))approach.https://github.com/webpack/html-loader/blob/master/test/loaderTest.js#L122
@zhuqiacheng? @sheerun?
kahneraja commentedon Sep 19, 2016
also... is there much of a difference between
${./src/img/title.jpg}and$require{./src/img/title.jpg}?in my head they seem same-ish... ?
sheerun commentedon Sep 19, 2016
As React shown, javascript is better than any templating language. Allowing
${}interpolation inside html allows not only with full webpack integration (likesrc="${require('../image.png')}", but also allows for seamless templating<div id="header">${require("../partials/header.html")}</div>. It's the easiest way to integrate with webpack dependency traversal.For me allowing interpolation is both more powerful and actually easier to maintain in long run.
kahneraja commentedon Sep 19, 2016
If i understand things correctly, @gaearon i do tend to agree with @sheerun.
the standard interpolate approach is flexible and possibly easier to maintain.
If that's the case then fix to this would a PR to the 'create-react-app' to line up config and html files.
gaearon commentedon Sep 19, 2016
OK, will accept a PR that adds interpolation syntax but disables automatic handling of
link:href.kahneraja commentedon Sep 19, 2016
on it :)
kahneraja commentedon Sep 19, 2016
getting a serious of failures when attempting to require interpolation with the dev config.
investigating....
gaearon commentedon Sep 19, 2016
Maybe there’s some kind of typo in
index.html?gaearon commentedon Sep 22, 2016
Meh, interpolation syntax is super annoying and hard to understand.
I’m working on another solution to this, stay tuned!
gaearon commentedon Sep 22, 2016
I drafted a proposal to solve this in #703. Unless we find some fatal flaws, it should come out in 0.5.0. Let me know what you think!
gaearon commentedon Sep 22, 2016
Closing as this is fixed, and will be released in 0.5.0.
gaearon commentedon Sep 23, 2016
This is now supported in 0.5.0.
Read about using the new
publicfolder.See also migration instructions and breaking changes in 0.5.0.