Изображения Gatsby + Netlify CMS из Markdown не конвертируются
Я делаю свой первый сайт с помощью Gatsby + Netlify CMS, после нескольких уроков, которые я сделал. Но теперь я начал с этого шаблона Гэтсби-Лондон. Как этот шаблон не интегрирован с Netlify CMS. Я работал с этим и получил это. Единственное, что я сделал, я прокомментировал все, что связано с миниатюрами, потому что это создавало некоторые проблемы, которые я решу позже, а также я удалил все сообщения в блоге и оставил только одно сообщение. А в остальном все ок.
После загрузки на Netlify я увидел некоторые проблемы с изображениями. Изображения, которые я загрузил. Они не реагировали. Но все исходные сообщения, поставляемые с шаблоном, адаптивны. Также я добавляю одно из своих изображений в тот пост, на который не ответил. После прочтения и исследования я обнаружил, что проблема связана с указанным путем, и необходимо использовать относительный путь.
Итак, я выполнил шаги из учебного блога Исси, и он еще не работает, та же проблема. Он не конвертирует изображения. Потом я попробовал использовать другую затычку (gatsby-plugin-netlify-cms-paths) но все то же самое.
Когда я проверяю с помощью инструмента проверки, я вижу, что изображение не обернуто всеми классами gatsby, чтобы сделать изображение отзывчивым:
<!-- some html -->
<div class="post-content-body">
<p>
<a class="gatsby-resp-image-link" href="/static/b833f68b610104a59dcc9d3be77f6170/3acf0/cody-davis-259003-unsplash.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; max-width: 1360px; margin-left: auto; margin-right: auto;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.76470588235294%; position: rela ....SOME GENERATED CODE... ">
<img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; verti ....SOME GENERATED CODE..." sizes="(max-width: 1360px) 100vw, 1360px">
</span>
</span>
</a>
</p>
<p>
<img src="/assets/como-conseguir-gatitos-y-gatitas-sociables.jpg" alt="Gatito" title="Feliz">
</p>
</div>
<!-- some html -->
Первое <p> создается с помощью gatsby-image, потому что это изображение находится в той же папке, что и файл.md. И второй<p> это изображение, которое хранится в папке Netlify CMS static/img
Если кто знает, в чем проблема? И как решено. Я проверяю много источников, но в моем проекте все работает.
Также, если вы можете проверить, это мой репозиторий на GitHub
Это мой gatsby-config:
const urljoin = require("url-join")
const siteConfig = require("./siteConfig")
var netlifyCmsPaths = {
resolve: `gatsby-plugin-netlify-cms-paths`,
options: {
cmsConfig: `/static/admin/config.yml`,
},
}
module.exports = {
siteMetadata: {
title: siteConfig.name,
author: siteConfig.author,
description: siteConfig.description,
siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
social: {
twitter: siteConfig.twitter,
},
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets`,
name: "images",
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
netlifyCmsPaths,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
netlifyCmsPaths,
{
resolve: `gatsby-remark-relative-images`,
options: {
name: "images",
},
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1360,
// withWebp: true,
// showCaptions: true,
// quality: 75,
// wrapperStyle: `margin: 7vw 0;`,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
],
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require("postcss-easy-import")(),
require("postcss-custom-properties")({ preserve: false }),
require("postcss-color-function")(),
require("autoprefixer")({ browsers: ["last 2 versions"] }),
],
},
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
},
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
//trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: siteConfig.name,
short_name: siteConfig.shortName,
start_url: siteConfig.prefix,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/gatsby-icon.png`,
},
},
`gatsby-plugin-netlify`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-netlify-cms`,
],
}
gatsby-node.js
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const blogPost = path.resolve(`./src/templates/blog-post.js`)
return graphql(
`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog posts pages.
const posts = result.data.allMarkdownRemark.edges
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: post.node.fields.slug,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})
return null
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
fmImagesToRelative(node)
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
config.yml
# name: test-repo
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
media_folder: static/assets
public_folder: assets
collections:
- name: blog
label: Blog
folder: content/blog
create: true
slug: "{{slug}}"
fields:
- { name: "title", label: "Title", widget: "string" }
- { name: date, label: Date, widget: "string" }
- { name: description, label: Description, widget: "string" }
# - { name: thumbnail, label: Thumbnail, widget: image }
- {label: "Body", name: "body", widget: "markdown"}