🙋 Support image meta tags

[jaredpalmer]

Feature Request

🤔 Expected Behavior

If I include a <meta name="og:image" content="./cover.jpg">, in an index.html, i'd expect that the source path gets properly updated after a successful build.

<meta name="og:image" content="./cover.jpg" />

would become

<meta name="og:image" content="./123414523412341234.jpg" />

😯 Current Behavior

meta tags with references to assets are not updated

🌍 Your Environment

Software	Version(s)
Parcel	1.1.0
Node	8
npm/Yarn	1.3
Operating System	macOs

[DeMoorJasper]

Any more meta tags you can think about that can contain assets? It would help add full support for all meta names that can contain assets

[jaredpalmer]

<meta name="og:image" content="./123414523412341234.jpg" />
<meta name="twitter:image" content="./123414523412341234.jpg" />
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">
<link rel="icon" sizes="192x192" href="/path/to/highres-icon.png">
<meta itemprop="image" content="http://example.com/image.jpg">
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<link rel="mask-icon" href="/path/to/icon.svg" color="red">
<meta name="msapplication-TileImage" content="/path/to/tileimage.jpg">
<link rel="preload" href="image.png" as="image">

Source: https://github.com/joshbuchea/HEAD

[gregkohn]

Expanding the scope of this ticket slightly, it appears support is missing for <use> tags, which also produce a dependency. e.g.:

<svg class="icon -facebook" viewBox="0 0 32 32">
  <use xlink:href="./src/sprite.svg#facebook">
</svg>

[dmgawel]

Do you have any workaround before this feature is shipped?

[tribela]

@dmgawel I just copy directly into out dir after build. https://github.com/Kjwon15/upbit-parody/blob/master/build.sh#L7

[dmgawel]

@gregkohn <use> tags support is resolved by #612.

[tomasdev]

~Throwing this here... nobody had an issue with twitter:image tag having to be a full URL instead of relative??~ nevermind, fixed it by cp the image that I needed so it doesn't have the hash.

[mtskf]

This solution won't work - og:image content url must be full URL (relative path won't work).

[lukechilds]

@mtskf I got stuck with this and created a plugin to manually set og:image as an absolute URL.

Not the cleanest solution, would be great if we could do this directly in parcel, but it works.

https://github.com/lukechilds/parcel-plugin-ogimage

[LeonardNolting]

@mtskf I got stuck with this and created a plugin to manually set og:image as an absolute URL.

Not the cleanest solution, would be great if we could do this directly in parcel, but it works.

https://github.com/lukechilds/parcel-plugin-ogimage

Great plugin, thanks! A version for parcel v2 is here: https://github.com/takeokunn/parcel-transformer-ogimage (hopefully others won't have to search for this for as long as I did 😄)