Adding multiple images in one-off pages

Question

I'm transitioning from WordPress to Gatsby. How should I add multiple images from the file system throughout a one-off page (ex. homepage)?

I like the advantages of the gatsby-image plugin component, but is a graphql query required for each image? The example here only shows one image. In a page with dozens of images a graphql query for each one seems verbose compared to a simple html image tag.

Is a different image component or import technique better in this circumstance?

Thanks!

gatsby can read data from WP source, no need to read it from filesystem — xadm
Hi xadm, I am planning on using the wordpress source plugin for post content, but for one-off pages like homepage etc. that are highly stylized I prefer to have everything locally under version control for ease of development. — Bertiewo
local pages can be markdown file plus resources per folder - many tutorials about this use case ...... "dozens of images" - where/why/what for? — xadm
I will look into importing everything from a folder, that might work, thanks! I will be using HTML for the markup since I need to add many custom classes etc. The page shows a number of products and services which all differ in their presentation. Does using GraphQL not complicate things since the images resources area already local? For example you import JS files, not use GraphQL. Or is there something I am missing? — Bertiewo

Bertiewo Bertiewo · Accepted Answer · 2020-04-21T19:14:58

0

votes

I ended up using inline require to add images.

<img src={require('../assets/logo.png')} />

Adding multiple images in one-off pages

1 Answers