New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't dynamic require img? #1532
Comments
I google
and finally found this https://webpack.github.io/docs/context.html. this seems a problem of webpack dynamic requires.
and everything is ok now. |
Thanks @magicly for writing up this fix, this issue really tripped me up while I was migrating from Gatsbyv 0.x to v1.x. For anyone else who stumbles across this, I wanted the same thing, but also wanted the file extension to be dynamic. In both my case, and in @magicly’s case from the looks of things, we are creating a cover image for an individual article, with the path coming from Markdown frontmatter. With the context of a project that’s something like the Gatsby default starter blog, you probably have some like this: ---
title: The title of the post
featured_image: ./teaser.jpg
--- Then in your GraphQL queries on the index page that lists out all your articles, you’re going to want to include the
Now you probably want to iterate over all the posts, and show the title and the featured image on the index page. Inside your React component, you might do something like: // …
// Create a new require context for Webpack
const requireFeatureImage = require.context(
`./../pages/portfolio/`, // Don’t make this a variable
true, // Whether or not to check subdirectories
/^.*\.(svg|png|gif|jpg|jpeg|webp|)$/ // Rough regex for extensions, maybe change this for your use case?
)
return (
<ol>
{pages.map(function(page, i) {
let path = page.node.frontmatter.featured_image.relativePath
let imgPath = `./${path.split('portfolio/')[1]}`
return (
<li key={`Item_${page.node.fields.slug}`}>
<Link to={page.node.fields.slug}>
<img src={requireFeatureImage(imgPath)} />
<h2>
{page.node.frontmatter.title}
</h2>
</Link>
</li>
)
})}
</ol>
) The docs for @KyleAMathews Is this something you might be interested in me expanding on for the docs? Or is there an example / better approach for this sort of thing that I missed? Thanks! |
Part 5 of the tutorial is going to get into this but in the meantime, checkout out www and gatsbygram e.g. Line 209 in 66e86d4
If you install https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ then linked images in frontmatter are then queryable via graphql. |
hello, I am writing a blog and in the posts index I want to list all my posts and each post has a cover.
below is my code:
but I got the warning:
despite the warning, the page seems ok, but when I build the pages, and deploy, then got the errors:
Then I change my code to this:
and I got the warning on the console,
and the error on web page:
I am sure the path '../md/new4/cover4.png' is right, because if I change code to:
then everything is fine. my environment is:
node: v8.1.2
npm: v5.0.3
gatsby: 1.2.0
OSX 10.11.5
thanks~
The text was updated successfully, but these errors were encountered: