Reactjs 盖茨比评论图像是偶尔链接图像
我的文件结构如下:Reactjs 盖茨比评论图像是偶尔链接图像,reactjs,image,frontend,gatsby,Reactjs,Image,Frontend,Gatsby,我的文件结构如下: src - images - - blog-images - - - (various png and jpg files) - pages - - blog - - - (various .md files) 我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我已经包括了盖茨比评论图片,并由gatsby-config.js修改为如下所示: plugins: [ `gatsby-plugin-react-helmet`, { resolv
src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我已经包括了盖茨比评论图片,并由gatsby-config.js修改为如下所示:
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogImages`,
path: `${__dirname}/src/images/blog-images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
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/Favicon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-sass`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
}
}
]
}
},
偶尔,当我将图像从blog images文件夹移动到images或pages/blog文件夹时,图像会显示出来。但是,当我试图调整它或者通过移动它在页面上获得第二个图像时,它停止了工作。我撤销了破坏图像的内容,图像就不会回来了
我已经试着跟随和,但我还没有更进一步地理解我做错了什么。发布后不久,我发现了这一点 我试图通过
[alt](./filename.png)
或[alt](./blog images/filename.png)
引用该图像。最后,我引用了post,而不是以图像为中心的gatsby源文件系统配置
有效的方法是
[alt](../../images/blog images/filename.png)
在发布后不久,我就明白了
我试图通过[alt](./filename.png)
或[alt](./blog images/filename.png)
引用该图像。最后,我引用了post,而不是以图像为中心的gatsby源文件系统配置
起作用的是[alt](../../images/blog-images/filename.png)