Картинки Gatsby Starter Blog не загружаются - PullRequest
Новая
       29

Картинки Gatsby Starter Blog не загружаются

1 голос
/ 28 апреля 2020

Я использую шаблон блога gatsby для создания личного блога. Я внес изменения, чтобы улучшить некоторые функции, хотя я не внес никаких изменений в обработку изображений.

С учетом всего этого изображения, похоже, не отображаются на странице, когда createPage создает записи журнала из файлы уценки.

вызов изображения файла уценки

![linksx](./links.jpg) ![links1](../pages/roam-research-intro/links1.jpg)

Здесь я пробую, если изображение должно быть в той же папке как файл уценки или в той же папке, что и шаблон страницы - ни один из них не работает.

Файлы

enter image description here

Конфигурация Гэтсби 

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

Результат

result

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Как отметил Шубхам, проблема в том, что изображения слишком велики. Обрезав их по ширине, они могут отображаться на экране.

Было бы полезно узнать, есть ли способ автоматически сжимать изображения, чтобы они соответствовали максимальной ширине.

0 голосов
/ 28 апреля 2020

Поскольку уценка и изображения находятся в одном и том же каталоге, вы можете просто указать изображение, как показано ниже 

![linksx](./links.jpg)
![links1](./links1.jpg)

Если бы они находились в разных каталогах, вам необходимо настроить gatsby-source-filesystem

Проверьте documentation для получения дополнительной информации 

{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },

и используйте относительный путь

Также убедитесь, что максимальный размер изображения не превышает maxWidth, иначе изображения не будут загружаться. Вы можете установить достаточно высокое значение для maxWidth, если вы не можете обрезать изображения

...