Here are other answers that have not worked for me:
The images are being rendered, and can even be accessed via the url, but the img src attribute is not being rewritten to the proper static link.
In my markdown
The resulting html
<img src="./palmettos.jpg" alt="Palmettos"></img>
The actual image renders in the browser at http://localhost:8000/static/8edfbf87ca46c4dc31640e0b93494b4f/ced80/palmettos.webp
My config:
module.exports = {
siteMetadata: {
title: "Standingwater",
siteUrl: "https://standingwater.io"
},
plugins: [
"gatsby-plugin-styled-components",
"gatsby-plugin-image",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sitemap",
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/
}
}
},
{
resolve: "gatsby-transformer-remark",
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 1200,
}
},
"gatsby-remark-emoji"
]
},
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-plugin-fontawesome-css",
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
__key: "pages",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "posts",
path: "./src/markdown/posts/",
},
__key: "posts",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "projects",
path: "./src/markdown/projects/",
},
__key: "projects",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "current",
path: "./src/markdown/current/",
},
__key: "current",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "hobbies",
path: "./src/markdown/hobbies/",
},
__key: "hobbies",
},
],
};
The entire site is opensource at mas-4/standingwater.
I have tried everything I've found on the internet and none of the solutions seem to work, and quite often they seem to suggest flaky solutions. I'm really not even sure how to debug this particular one. Any help would be super appreciated.
The solution was frustratingly simple:
My original config said
{
resolve: "gatsby-transformer-remark",
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 1200,
}
},
"gatsby-remark-emoji"
]
},
But this was wrong. It should have said:
{
resolve: "gatsby-transformer-remark",
options: { // should be wrapped in options
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 5000,
withWebp: true,
showCaptions: true,
quality: 100,
},
},
"gatsby-remark-emoji",
],
}
},