盖茨比降价图像卡在模糊的范围内
Gatsby markdown images are stuck with blurred span
我正在使用 Gatsby,我想在我的帖子中加载来自 markdowns 的图片。
我正在使用本教程:
https://www.gatsbyjs.org/docs/working-with-images-in-markdown/
我正确加载和删除了 "featuredImage",然后模糊了跨度。
但是 markdown 中的图像已加载,但模糊的跨度仍保留在页面上。
我的gatsby-config.js
//https://www.gatsbyjs.org/docs/adding-markdown-pages/
module.exports = {
siteMetadata: {
title: `Tzook Blog`,
description: `My old blog in new gatsby`,
author: `@tzookb`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/content/`
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
`gatsby-plugin-emotion`
],
}
查看这些图片:
可以在 cwgw's comment on this open gatsby issue:
中找到解决此问题的方法
So digging a little deeper, it looks like Gatsby only looks for "subplugins" at one specific path, options.plugins
.
gatsby-plugin-mdx
uses options.gatsbyRemarkPlugins
. This is fine for transforming markdown as the plugin handles that itself, but Gatsby-specific api files like gatsby-browser.js
don't get loaded because Gatsby doesn't know they exist.
If you try this…
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [ `gatsby-remark-images` ],
plugins: [ `gatsby-remark-images` ],
}
},
…everything works as it should.
ksav 的解决方案对我有用 - 如果有人感到困惑,这是此语法的缩写:
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [{ resolve: 'gatsby-remark-images' }],
plugins: [{ resolve: 'gatsby-remark-images' }],
},
其中带有键 'resolve' 的对象用于指定插件名称,而不是简单地将其作为字符串传递到数组中。
我正在使用 Gatsby,我想在我的帖子中加载来自 markdowns 的图片。
我正在使用本教程: https://www.gatsbyjs.org/docs/working-with-images-in-markdown/
我正确加载和删除了 "featuredImage",然后模糊了跨度。
但是 markdown 中的图像已加载,但模糊的跨度仍保留在页面上。
我的gatsby-config.js
//https://www.gatsbyjs.org/docs/adding-markdown-pages/
module.exports = {
siteMetadata: {
title: `Tzook Blog`,
description: `My old blog in new gatsby`,
author: `@tzookb`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/content/`
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
`gatsby-plugin-emotion`
],
}
查看这些图片:
可以在 cwgw's comment on this open gatsby issue:
中找到解决此问题的方法So digging a little deeper, it looks like Gatsby only looks for "subplugins" at one specific path,
options.plugins
.
gatsby-plugin-mdx
usesoptions.gatsbyRemarkPlugins
. This is fine for transforming markdown as the plugin handles that itself, but Gatsby-specific api files likegatsby-browser.js
don't get loaded because Gatsby doesn't know they exist.If you try this…
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [ `gatsby-remark-images` ],
plugins: [ `gatsby-remark-images` ],
}
},
…everything works as it should.
ksav 的解决方案对我有用 - 如果有人感到困惑,这是此语法的缩写:
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [{ resolve: 'gatsby-remark-images' }],
plugins: [{ resolve: 'gatsby-remark-images' }],
},
其中带有键 'resolve' 的对象用于指定插件名称,而不是简单地将其作为字符串传递到数组中。