Skip to main content

Gatsby: Adding Images to Posts

Intro

We are currently working on the process of automatically creating pages for markdown files that are on the local directory. So far so good, but we still don’t have the ability to add images to the MD files. Currently the only thing that shows on the page is the alt tag. Let’s fix that.

Plugins

We need to bridge the gap between gatsby-image and remark so that gatsby-image can identify and transform the images inside our markdown files.

  • gatsby-plugin-sharp
  • gatsby-remark-images
  • gatsby-remark-relative-images

Configuration

Once those plugins are installed you just need to configure them. Check the plugin docs for instructions.

/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/

module.exports = {
siteMetadata: {
title: 'Gatsby Training',
author: 'Nick Coughlin'
},
plugins: [
'gatsby-plugin-sass',
'gatsby-plugin-sharp',
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [
'gatsby-remark-relative-images',
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 750,
linkImagesToOriginal: false
}
}
],
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'src',
path: `${__dirname}/src/`
}
}
],
}

And we have working pictures.

Working Photos

GitHub Repo

Ncoughlin: Gatsby-Bootcamp

Recent Work

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More
slide-6
slide-5
slide-2
slide-1
slide-3
slide-4
Technologies Used
TypeScript
Electron
React

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More
slide-1
slide-2
slide-5
slide-3
slide-4

Technologies Used

Front End
JavaScript
Docker
React
Redux
Vite
Next
Docusaurus
Stripe
Sentry
D3
React-Flow
TipTap
Back End
JavaScript
Python
AWS CognitoCognito
AWS API GatewayAPI Gateway
AWS LambdaLambda
AWS AthenaAthena
AWS GlueGlue
AWS Step FunctionsStep Functions
AWS SQSSQS
AWS DynamoDBDynamo DB
AWS S3S3
AWS CloudwatchCloudWatch
AWS CloudFrontCloudFront
AWS Route 53Route 53
AWS EventBridgeEventBridge