gatsby-starter-forty | js V2 starter template based on Forty | Frontend Framework library
kandi X-RAY | gatsby-starter-forty Summary
kandi X-RAY | gatsby-starter-forty Summary
Gatsby.js V2 starter template based on Forty, designed by HTML5 UP. Check out for more Gatsby starters.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of gatsby-starter-forty
gatsby-starter-forty Key Features
gatsby-starter-forty Examples and Code Snippets
Community Discussions
Trending Discussions on gatsby-starter-forty
QUESTION
I am using GatsbyJS starter https://www.gatsbyjs.org/starters/codebushi/gatsby-starter-forty/ and have a need to display all pictures from a directory on a page. Gatsby's recommended way to import media is to use import
statement, but it results in hashes added to the file names after the build. For example:
/static/pic09-d59e4b49832baeb9c62a7a9d6c070f8c.jpg
If I retrieve all filenames from a directory and try to create elements with
src={fileName}
it results in empty images, because file names does not match with the ones from the server already with hashes appended.
Please recommend an elegant solution on how to go through this. My backup plan is to put everything to the static
directory where hashes are not being added, but it is not recommended way by Gatsby documentation: https://www.gatsbyjs.org/docs/static-folder/
This is what I have now:
...ANSWER
Answered 2019-Jul-19 at 08:49Note: this answer assumes you have already installed gatsby-source-filesystem
, gatsby-transformer-sharp
and gatsby-plugin-sharp
.
You can use a graphql page query to get all of the files of a certain extension, in a certain folder by filtering allFile with a combination of regular expression matchers.
Then you can loop through the resulting edges and use gatsby-image
to display the image.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install gatsby-starter-forty
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page