i'm using the gatsby starter blog template to create a personal blog. I have made modifications to enhance a few features, though I haven't made any changes to image handling.
With that said, images do not seem to be rendering on the page when createPage is constructing log posts from the markdown files.
Markdown file image call
![linksx](./links.jpg)
![links1](../pages/roam-research-intro/links1.jpg)
Here I'm trying out if the image needs to be I the same folder as the markdown file, or in the same folder as the page template - neither works.
Files
Gatsby config
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/assets`,
name: `assets`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1000,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
],
},
},
Result
Since both markdown and images are in the same directory you can simply specify the image like below
![linksx](./links.jpg)
![links1](./links1.jpg)
If they were in different directories, you would need to configure the gatsby-source-filesystem
Check the documentation
for more information
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/images`,
},
},
and use a relative path
Also ensure that the max size of image doesn't exceed the the maxWidth
or else the images won't load. You can set a high enough value for maxWidth in case you cannot trim down the images