Create-react-app: 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
https://github.com/webpack/html-loader/issues/17#issuecomment-241038572

    <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',

https://github.com/roadmanfong/create-react-app/commit/48bb6cf692ae401f8deba02cb53009be0f7a9b3e

[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 ./: https://github.com/webpack/html-loader/issues/17#issuecomment-247806297.

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.

[kahneraja]

additional notes

Pre configured:
["img:src"]

React Scripts configuration:
["link:href"]

New potential tags:
["meta:content"] // if content starts with "./"

[kahneraja]

hmm i'm guessing the html-loader guys are not going to approve cause they already have advice on this.
https://github.com/webpack/html-loader#interpolation

[kahneraja]

you think it's worth pushing for a change?

[kahneraja]

we could do both.

change the prod config in thiscreate-react-app and also push for that change in html-loader

what's your take @gaearon ?

[gaearon]

hmm i'm guessing the html-loader folks are not going to approve cause they already have advice on this

I don’t see why not. Interpolation is a possible solution but I haven’t seen ./ being considered before. I think it could work fine as an option (even if not the default).

change the prod config in thiscreate-react-app and also push for that change in html-loader

If we just add meta:content, wouldn’t it break if your content is something other than a file? e.g. <meta name="description" content="my website"> If not maybe we can just do that.

[kahneraja]

i guess the minimum we could do is just push this...
https://github.com/roadmanfong/create-react-app/commit/48bb6cf692ae401f8deba02cb53009be0f7a9b3e

and then encourage people to do the approach @roadmanfong mentioned.
<meta property="og:image" content="${require(./src/images/cover.png)}" />

shall i set up a PR?

[gaearon]

I’m not really happy supporting this long term and adding custom syntax to HTML.

[kahneraja]

Ok no problem. Ill just do that as a temp work around and try to push to the html-loader proj later.

[gaearon]

:+1:

[gaearon]

Meh. I think let’s go for ${} syntax since it’s explicit and gives user the control.

@kahneraja

Would you mind submitting a PR that removes automatic detection of link:href but adds ${} syntax?

[kahneraja]

@gaearon can i just confirm you mean to add 2 separate PRs.

one to make html-loader pick up on any meta tag with content like this?

<meta name="twitter:image:src" content="${`./src/img/title.jpg`}">

and one to remove that config settings from create-react-app?

... attrs: ['link:href'], // remove

[kahneraja]

@gaearon another thing.

from looking at this test it does sort of look like the html-loader guys are keen on sticking with the $(require('...')) approach.
https://github.com/webpack/html-loader/blob/master/test/loaderTest.js#L122

@zhuqiacheng? @sheerun?

[kahneraja]

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]

As React shown, javascript is better than any templating language. Allowing ${} interpolation inside html allows not only with full webpack integration (like src="${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]

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]

OK, will accept a PR that adds interpolation syntax but disables automatic handling of link:href.

[kahneraja]

on it :)

[kahneraja]

getting a serious of failures when attempting to require interpolation with the dev config.

investigating....

[gaearon]

Maybe there’s some kind of typo in index.html?

[gaearon]

Meh, interpolation syntax is super annoying and hard to understand.
I’m working on another solution to this, stay tuned!

[gaearon]

I drafted a proposal to solve this in https://github.com/facebookincubator/create-react-app/pull/703. Unless we find some fatal flaws, it should come out in 0.5.0. Let me know what you think!

[gaearon]

Closing as this is fixed, and will be released in 0.5.0.

[gaearon]

This is now supported in 0.5.0.

Read about using the new public folder.

See also migration instructions and breaking changes in 0.5.0.