Проблема с изображением Страпи и Гэтсби

Я выполнил следующие шаги: https://github.com/strapi/gatsby-source-strapi Поскольку изображение ›› publicURL также не работало, я переустановил последнюю версию gatsby-source-strapi, чтобы иметь возможность получить publicURL. Это происходит через локальный файл ...

Вот мой gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL:  "http://localhost:1337",
        contentTypes: ["articles"],
        singleTypes: [`homepage`, `global`],
        queryLimit: 1000,
      },
    },
    "gatsby-plugin-postcss",
  ],
};

Страница моего блога выглядит следующим образом

import React from 'react';
import Footer from '../partials/Footer';
import Navbar from '../partials/Navbar';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiArticles{
      edges {
        node {
          strapiId
          title
          description
          image {
            localFile {
              publicURL
            }
          }
        }
      }
    }
  }
`;

function Blog() {
  return (
    <div className="min-h-screen overflow-hidden">
        <Navbar />
      <div className="max-w-4xl mx-auto py-12 lg:py-16 ">
        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          <span className="block">Coming soon!</span>
          <span className="block text-indigo-600">I am just learning stuff about headless CMS and will build a blog here with strapi.io. Hang in!</span>
        </h2>
      </div>
      <StaticQuery
        query={query}
        render={data => (
          <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
            {data.allStrapiArticles.edges.map(article => (
              <div className="rounded overflow-hidden shadow-lg">
                <li key={article.node.strapiId}>{article.node.title}</li>
                <img
                  class="w-10 h-10 object-cover object-center rounded-full"
                  src={article.node.image.localFile.publicURL}
                  alt="random user"
                />
              </div>
            ))}
          </div>
        )}
      />
    <Footer />
    </div>
  );
}
export default Blog;

Ошибка: невозможно прочитать свойство publicURL, равное неопределенному. Как-то localfile не определен ... Мои запросы введите описание изображения здесь


strapi gatsby gatsby-plugin
person Katharina Schreiber    schedule 26.04.2021    source источник
comment
Что за ошибка? 404 изображения?   -  person Ferran Buireu    schedule 27.04.2021
comment
Страница не будет отображаться в dev: Ошибка: невозможно прочитать свойство publicURL, равное undefined.   -  person Katharina Schreiber    schedule 27.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

В соответствии с:

Страница не будет отображаться в dev: Ошибка: невозможно прочитать свойство publicURL, равное undefined.

images - это массив, поэтому к нему нужно обращаться как:

Ты пробовал?

        {data.allStrapiArticles.edges.map(({ node:article })=> {
         return <div key={article.strapiId} className="rounded overflow-hidden shadow-lg">
            <li key={article.strapiId}>{article.title}</li>
            {article.image[0].localFile && 
            <img
              class="w-10 h-10 object-cover object-center rounded-full"
              src={article.image[0].localFile.publicURL}
              alt="random user"
            />}
          </div>
        })}

Среди деструктуры и псевдонима в повторяемой переменной я добавил атрибут key.

Кажется, что у вас где-то есть undefined изображение, добавление этого условия (article.image[0].localFile.publicURL) напечатает его, только если оно доступно.

person Ferran Buireu    schedule 26.04.2021
comment
то же, к сожалению ..... - person Katharina Schreiber; 26.04.2021
comment
Проверьте еще раз, пожалуйста. Я добавил условие, чтобы сохранить вашу проблему - person Ferran Buireu; 27.04.2021
comment
Неизвестная ошибка времени выполнения article.image.localFile не определен: не удалось создать codeFrame ???? Кроме того, каждая статья имеет собственное изображение ... Это такая боль. - person Katharina Schreiber; 27.04.2021
comment
Используйте article.image.localFile в качестве условия (попробуйте article.image, если нет). Кроме того, проверьте все свои сообщения, потому что кажется очевидным, что у вас где-то есть неопределенное изображение. - person Ferran Buireu; 27.04.2021
comment
{article.image.localFile && ‹img class = w-10 h-10 object-cover object-center rounded-full src = {article.image.localFile.publicURL} alt = random user /›} ›› это приводит к отсутствию тега изображения, так что даже не сломанный, но вообще не рендеринг тега img ... - person Katharina Schreiber; 27.04.2021
comment
Можете ли вы распечатать отладку console.log(article). Вложенная структура должна быть неправильной - person Ferran Buireu; 27.04.2021
comment
Давайте продолжим это обсуждение в чате. - person Katharina Schreiber; 27.04.2021
comment
Сейчас он выходит из строя. 9:10:57 AM: WebpackError: TypeError: Невозможно прочитать свойство localFile неопределенного значения. Зачем ??? - person Katharina Schreiber; 27.04.2021
comment
Оставьте условие как article.image [0] .localFile. Кроме того, вам нужно будет загрузить свои изображения в продакшн. - person Ferran Buireu; 27.04.2021