Instantly share code, notes, and snippets.

Embed
What would you like to do?
Q: How to pass down the `seoImage` from page to seo component avoiding Gatsby's automatic to-data-URI conversion for images < 10kb?
// Page component index.js
import React from 'react';
import Layout from '../components/layout/layout';
import Seo from '../components/seo/seo';
import seoImage from '../images/social.png'; // because this image is < 10kb it gets converted to data:base64... which doesn't work for <meta> tags
const IndexPage = () => (
<Layout>
<Seo seoImage={seoImage} />
{/* ... */}
<h1>Index Page</h1>
{/* ... */}
</Layout>
);
// ...
// Dumb component seo.js
const Seo = ({seoImage}) => (
<Helmet>
{/* ... */}
<meta content={seoImage} property="og:image" />
{/* ... */}
</Helmet>
);
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment