gatsby: [gatsby-remark-images] new images 404 or end up being 0x0 pixels
In effect, I can’t add new images to my blog using gatsby-remark-images
Environment
Gatsby version: 1.9.157 Node.js version: 8.6.0 Operating System: macOS 10.12.6
File contents (if changed):
gatsby-config.js
:
module.exports = {
siteMetadata: {
title: `Personal site of Patrick Canfield`,
description: ``,
siteUrl: `https://patrickcanfield.com`
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
feeds: [
{
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.edges.map(edge => {
return Object.assign({}, edge.node.frontmatter, {
description: edge.node.excerpt,
url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
custom_elements: [{ 'content:encoded': edge.node.html }],
});
});
},
query: `
{
allMarkdownRemark(
limit: 1000,
sort: { order: DESC, fields: [frontmatter___date] },
) {
edges {
node {
excerpt
html
frontmatter {
title
date
path
}
}
}
}
}
`,
output: '/rss.xml',
feedTitle: 'Blog of Patrick Canfield'
}
]
}
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography.js`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/blog`,
name: 'pages',
},
},
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
`gatsby-remark-smartypants`,
{
resolve: `gatsby-remark-images`,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 800,
// Remove the default behavior of adding a link to each
// image.
linkImagesToOriginal: false,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
// `ignoreFileExtensions` defaults to [`png`, `jpg`, `jpeg`, `bmp`, `tiff`]
// as we assume you'll use gatsby-remark-images to handle
// images in markdown as it automatically creates responsive
// versions of images.
//
// If you'd like to not use gatsby-remark-images and just copy your
// original images to the public directory, set
// `ignoreFileExtensions` to an empty array.
// ignoreFileExtensions: [],
},
}
]
}
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: '...',
// Setting this parameter is optional
anonymize: true
},
},
],
};
package.json
:
{
"name": "gatsby-starter-default",
"description": "Gatsby default starter",
"version": "1.0.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"gatsby": "^1.9.112",
"gatsby-cli": "^1.1.19",
"gatsby-link": "^1.6.22",
"gatsby-plugin-feed": "^1.3.11",
"gatsby-plugin-google-analytics": "^1.0.11",
"gatsby-plugin-react-helmet": "^1.0.8",
"gatsby-plugin-sharp": "^1.6.15",
"gatsby-plugin-typography": "^1.7.10",
"gatsby-remark-copy-linked-files": "^1.5.21",
"gatsby-remark-images": "^1.5.36",
"gatsby-remark-smartypants": "^1.4.8",
"gatsby-source-filesystem": "^1.5.5",
"gatsby-transformer-remark": "^1.7.18",
"lodash.omit": "^4.5.0",
"react-fontawesome": "^1.6.1",
"react-html-parser": "^2.0.1",
"react-popper": "^0.7.4",
"resize-observer-polyfill": "^1.5.0",
"sharp": "^0.18.4",
"typography-theme-lawton": "^0.15.10"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^1.7.4"
}
}
gatsby-node.js
:
const path = require('path');
exports.createPages = ({ boundActionCreators, graphql }) => {
const { createPage } = boundActionCreators;
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
return graphql(`{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
excerpt(pruneLength: 250)
html
id
frontmatter {
date
path
title
}
}
}
}
}`
).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
result.data.allMarkdownRemark.edges
.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {} // additional data can be passed via context
});
});
});
};
gatsby-browser.js
: not changed
gatsby-ssr.js
: not changed
Before submitting this issue I tried:
- changing the image format from PNG to JPEG
- using different images
- changing the path of the blog post
- resizing the image
- upgrading to latest version of plugin
Steps to reproduce
Here’s a page on my blog with the issue: https://patrickcanfield.com/blog/2016/01/15/sleep-mindfulness-art/
Here’s the source code for that post: https://raw.githubusercontent.com/pzatrick/patrickcanfield.com/master/gatsby/src/blog/test.md
For now my workaround is to use an img
tag with an absolute URL to the image in the Gatby-generated static assets.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 23 (7 by maintainers)
Commits related to this issue
- Add to instructions that you need gatsby-plugin-sharp fixes #3545 — committed to gatsbyjs/gatsby by KyleAMathews 6 years ago
- Add to instructions that you need gatsby-plugin-sharp fixes #3545 (#3547) — committed to gatsbyjs/gatsby by KyleAMathews 6 years ago
- Add to instructions that you need gatsby-plugin-sharp fixes #3545 (#3547) — committed to jastack/gatsby by KyleAMathews 6 years ago
- docs: move gatsby-plugin-sharp to main plugins array re #3545 — committed to jlengstorf/gatsby by jlengstorf 6 years ago
- docs: move gatsby-plugin-sharp to main plugins array (#4386) re #3545 — committed to gatsbyjs/gatsby by jlengstorf 6 years ago
- Plugin Library build fixes (#3906) * Support URLs that end in SemVer ranges (#3305) Fixes #3164. * page path defaults to '/' (#3325) * page path defaults to '/' * Add test * Use grayma... — committed to gatsbyjs/gatsby by gillkyle 6 years ago
- remove trailing slash plugin. Add hotfix from https://github.com/gatsbyjs/gatsby/issues/3545#issuecomment-377736812 — committed to kevinhughes27/kevinandsam.travel by kevinhughes27 6 years ago
- Try image fix from... https://github.com/gatsbyjs/gatsby/issues/3545#issuecomment-377736812 — committed to monic-co/blog by joelburget 6 years ago
Actually nevermind, this seems to be a bug in https://github.com/rhysd/rehype-react - when processing your Markdown generated HTML through that (as described here: https://using-remark.gatsbyjs.org/custom-components/) it seems to stop processing anything in each
style
key-value pair after encountering the first;
in the value.At least in my case thats the reason for running into the described error - the base64 value itself is generated correctly.
Fixed by https://github.com/syntax-tree/hast-to-hyperscript/pull/13 for me, which can be applied to your app using
yarn add git://github.com/lfittl/hast-to-hyperscript
for testing / hotfixing this issue.cc @ChrisBoon @pzatrick
@lfittl Indeed it is working now! Thanks for making that PR
@lfittl Awesome, just tried it and it fixed it for me.
Not quite — you added
gatsby-plugin-sharp
as a “sub-plugin” togatsby-transformer-remark
. You want to add it as a top-level plugin at the same level as the other non-remark plugins.