Gatsby Remark Images не работает для встроенных изображений

Вот другие ответы, которые у меня не сработали:

Изображения обрабатываются, и к ним даже можно получить доступ через URL-адрес, но img src Атрибут не переписывается на правильную статическую ссылку.

В моей уценке

      ![Palmettos](./palmettos.jpg)

Полученный html

      <img src="./palmettos.jpg" alt="Palmettos"></img>

Фактическое изображение отображается в браузере по адресу http://localhost:8000/static/8edfbf87ca46c4dc31640e0b93494b4f/ced80/palmettos.webp

Моя конфигурация:

      module.exports = {
  siteMetadata: {
    title: "Standingwater",
    siteUrl: "https://standingwater.io"
  },
  plugins: [
    "gatsby-plugin-styled-components",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/
        }
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      plugins: [
        {
          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1200,
          }
        },
        "gatsby-remark-emoji"
      ]
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-fontawesome-css",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: "./src/markdown/posts/",
      },
      __key: "posts",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "projects",
        path: "./src/markdown/projects/",
      },
      __key: "projects",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "current",
        path: "./src/markdown/current/",
      },
      __key: "current",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "hobbies",
        path: "./src/markdown/hobbies/",
      },
      __key: "hobbies",
    },
  ],
};

Весь сайт с открытым исходным кодом на мас-4 / стоячая вода .

Я перепробовал все, что нашел в Интернете, и ни одно из решений не работает, и довольно часто они предлагают нестандартные решения. Я действительно даже не знаю, как отлаживать именно этот. Любая помощь будет очень признательна.

Источник

3 ответа

Решение

Решение было удручающе простым:

В моей исходной конфигурации говорилось

          {
      resolve: "gatsby-transformer-remark",
      plugins: [
        {
          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1200,
          }
        },
        "gatsby-remark-emoji"
      ]
    },

Но это было неправильно. Надо было сказать:

          {
      resolve: "gatsby-transformer-remark",
      options: { // should be wrapped in options
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 5000,
              withWebp: true,
              showCaptions: true,
              quality: 100,
            },
          },
          "gatsby-remark-emoji",
        ],
      }
    },
Источник

Наткнулся на эту проблему сегодня с gatsby v4. Моя проблема заключалась в том, что gatsby-remark-images не вносит никаких изменений в некоторые файлы изображений.

Что сработало для меня, так это изменить изображения (как изображение, так и встроенную уценку) с помощью .PNGрасширение до .pngрасширение.

Источник

Я также нашел невозможным решить эту проблему. Перепробовал кучу решений, ни одно из которых не сработало.

Однако, когда я делаюgatsby buildЯ получаю сообщение «неизвестная ошибка — прерывание», и появляется следующее:

      ** (process:18112): WARNING **: 23:11:01.908: smartcrop: no property named `premultiplied'
This query took more than 15s to run — which might indicate you're querying too much or have some unoptimized code:
File path: src/pages/blog/{mdx.frontmatter__slug}.js?__contentFilePath=gat
sby/magazine/blog/2023-summer/yet-another-post.mdx
URL path: /blog/yet-another-post/

Когда я извлекаю изображение из уценки, оно строится нормально.

Источник
Другие вопросы по тегам