javascript - 无法在 GatsbyJS 中查看 Markdown 文件正文中的内联图像
问题描述
我正在尝试显示 Markdown 文件中的图像,尤其是来自 Markdown 文件正文的图像,但无法看到它们。
我正在使用 GatsbyJS 官方文档推荐的插件配置来将图像嵌入到 Markdown 文件中。但是,我无法达到同样的效果。我可以使用 GraphQL 查询从 frontmatter 中查看图像,但无法查看 markdown 文件中的正文内联图像。
const guid = process.env.NETLIFY_GOOGLE_ANALYTICS_ID;
module.exports = {
siteMetadata: {
title: 'Apple Software',
description: 'my theme',
contact: {
phone: '+91 999999999',
email: 'info@abcxyz.com',
},
menuLinks: [
{
name: 'Services',
link: '/services',
},
{
name: 'Team',
link: '/team',
},
{
name: 'Testimonials',
link: '/testimonials',
},
{
name: 'Blog',
link: '/blog',
},
{
name: 'Contact',
link: '/contact',
},
{
name: 'Work',
link: '/work',
},
{
name: 'Courses',
link: '/carousel',
},
{
name: 'Careers',
link: '/careers',
},
],
},
plugins: [
'gatsby-plugin-sass',
'gatsby-transformer-json',
'gatsby-transformer-remark',
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/data`,
name: 'data',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/images`,
name: 'images',
},
},
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: guid ? guid : 'UA-XXX-1',
// Puts tracking script in the head instead of the body
head: false,
},
},
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
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: 590,
},
},
],
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200,
},
},
],
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
},
},
],
};
这是降价文件
---
path: '/services/accounting'
title: 'Accounting'
date: 2018-11-18T12:33:46+10:00
image: 'services/default.png'
---
Lorem markdownum aequalis strigis. _Saetigeri iubeas_, vultu huic alvum nondum
de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae
crimen habet Priamum nec.
## Ne verba patulosque numen vix libet
![Default Image](./default.png)
Agitabitur signa lympha; non lacunae, mox cum tumulis quoque triste dictis.
Ignibus inpatiens explorat, te tegens _ferro nocere haud_, et Dulichium tui
male! Quo sed [fuit flexit et](#vexant-achivi) hic die solido, gloria?
1. Cum det dixit Parcarum qui spemque est
2. Exit ex huic
3. Quod consiste agitataque claustraque vicina videt lacertis
4. Loquor videt
5. Ardua non igne caelesti coniugis cognovi diversorum
6. Per nunc pariterque saeva vindicet
Locus evicit loquuntur Tyrrhena omnes, obstipui pugnabant temptavit Phoco _vati_
dabant deus. Memorata haberet sepulcrales gentisque dum sic, in flumina templa!
Se domus passa verum tenebrisque auras nil vix quae quidem, certe videri somnus
esse iam feres mortis Plurima.
## Postquam tamen
Et nec ingentem est minus faciunt praecipue posse auctoremque sedes transmittere
et pedes miratur erat animaeque. Tellus admonuit humanam funes, sagittis et
licet! Inserui quamvis Clymeni.
- Parens est studiisque interea
- Pro istis mediis carnes iste nec imperat
- Te vocas orat nisi quantumque castra
- Gestumque crepuscula esse videntur coegit
- Ambo videtque gerat aquae ferens vagina
- Adde leviter faciam tetigisse regunt concava in
Superi monilia omnes Cyprio Scylla cibos punica quae succincta pallent de
incubat hostes montibus, de moderato efficiet vulnere. Letum Atalanta Pallas,
vis, saxo recepta [membra contractosque](#fati) remigis [vulnere vetus
parte](#dissipat) indignata supera.
frontmatter(标题)中的图像工作正常。但是相同的图像(default.png)没有从这个降价文件的正文中显示出来。
解决方案
推荐阅读
- python - Django - 扩展用户配置文件不以chenge形式显示文件
- c - ideone中的stdoutput为空
- html - 如何确保高度:0;也包括填充?
- c - 将自定义 assert() 与 AddressSanitizer 集成
- python - 自动下载支持当前安装的chrome版本的chromedriver
- html - jquery - 将第 th 类添加到子 td 的
- javascript - 解释这个函数是如何工作的
- python - “firebase_admin.db”没有属性“孩子”
- java - 在 Java 中使用“==”了解两个字符串之间的不同类型的相等性
- c++ - 使用 srand 进行转换的警告