GatsbyImage для URL-адресов, прочитанных из файла json

У меня есть файл json, из которого я загружаю данные для заполнения моей веб-страницы. Например, вот мой membersData.json

[
  {
    "name": "Person A",
    "photoUrl": null
  },
  {
    "name": "Person B",
    "photoUrl": "https://drive.google.com/uc?export=view&id=123456789012"
  }
]

Я использую резервный URL для нулевых изображений.

и у меня есть страница members.js

export default members = () => {
    return <>
      {data.map((entry, index) => (
        <Grid item xs={12} md={4} lg={3} key={index}>
          <MembersCard
            name={entry.name}
            photoUrl={entry.photoUrl}
          />
        </Grid>
      ))}
    </>
}

Где моя членская карта - это компонент карты, возвращающий за вычетом любого макета и стиля.

const MembersCard = (props) => {
    return <>
        <img src={props.photoUrl} alt= {props.name + " | Image"}/>
        <h1>{props.name}</h1>
    </>
}

Поскольку все изображения известны мне во время компиляции. Я хотел бы знать, можно ли использовать gatsby-plugin-image вместе с заполнителем traced-svg, чтобы улучшить плохое время загрузки этих изображений, поскольку они долго загружаются с диска Google.

edit: теперь я предварительно выбираю изображения локально перед сборкой и пытаюсь отправить данные в graphql через gatsby-node.js. Я нашел эту статью и построил аналогичную установку.

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  membersData.forEach( entry => {
    const {
      name,
      photoUrl
    } = entry;

    let imageName = name.replace(/\s+/g, '-').toLowerCase()
    let absolutePath = path.resolve(__dirname, IMAGE_PATH ,`${imageName}.jpg`);

    const data = {
      imageName,
      ext: '.jpg',
      absolutePath,
      extension: 'jpg'
    };

    const imageNode = ( photoUrl && photoUrl.startsWith("https://drive.google.com") )? {
      ...data,
      id: createNodeId(`card-image-${name}`),
      internal: {
        type: 'MembersCardImage',
        contentDigest: createContentDigest(data)
      }
    } : null;

    imageNode && actions.createNode(imageNode);

    const node = {
      name,
      image: imageNode,
      id: createNodeId(`card-${name}`),
      internal: {
        type: 'MembersCard',
        contentDigest: createContentDigest(entry),
      },
    }

    actions.createNode(node);
  })
}

но gatsby-transformer-sharp не работает на моем изображении, и в поле изображения нет childImageSharp. Произошли ли изменения?


image gatsby gatsby-image
person Blaine    schedule 14.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На данный момент вы не можете использовать gatsby-plugin-image для динамических аутсорсинговых файлов (таких как ваш). -

  • <GatsbyImageData> должен быть образ стажера, потому что вам нужно разрешить Гэтсби и его преобразователям обрабатывать изображение. Так что это не вариант для вас, поскольку вы используете внешние изображения.
  • <StaticImage>, как видно из документы, не принимает динамические props:

Ограничения на использование StaticImage

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

```
 // ⚠️ Doesn't work

 export function Logo({ logo }) {
 // You can't use a prop passed into the parent component
 return <StaticImage src={logo}>
}

```

Однако для вашего варианта использования я бы попробовал что-то вроде:

const MembersCard = (props) => {
    return <>
        {props.photoUrl && <img src={props.photoUrl} alt= {props.name + " | Image"}/>}
        <h1>{props.name}</h1>
    </>
}

Это позволит избежать сообщения:

Я использую резервный URL для нулевых изображений.

Поскольку вы не будете визуализировать изображение, если оно не существует.

person Ferran Buireu    schedule 14.03.2021
comment
Мне нужно визуализировать изображение, несмотря ни на что, поэтому вместо этого я использую резервное изображение. У меня есть скрипт, запущенный перед сборкой, который извлекает указанные данные из различных API-интерфейсов rest и graphql. Я могу, конечно, предварительно загрузить указанные изображения, вместо того, чтобы иметь только URL-адреса. Это хоть как-то поможет? - person Blaine; 14.03.2021
comment
Если предварительно кэшированные изображения принадлежат проекту (внутренние маршруты) и Гэтсби может обрабатывать их с помощью своих преобразователей и преобразователей, вы сможете использовать gatsby-plugin-image, в противном случае вам нужно будет использовать стандартный тег <img>, для которого я добавил обходной путь. чтобы избежать сообщения об ошибке. - person Ferran Buireu; 14.03.2021
comment
Значит, не повезло, даже если я предварительно загружу изображения? - person Blaine; 14.03.2021
comment
Зависит от того, когда загружаются эти изображения. Конечно, вы можете попробовать, чтобы проверить, как он себя ведет - person Ferran Buireu; 14.03.2021
comment
Поскольку я вызываю сценарий выборки еще до начала сборки. Файлы будут доступны непосредственно перед вызовом сборки Gatsby. Если бы изображения были доступны локально, как бы я их загрузил? - person Blaine; 14.03.2021
comment
В этом случае вы сможете использовать <GatsbyImageData> - person Ferran Buireu; 14.03.2021
comment
Как? Делая данные изображений доступными из файлов в gatsby-node.js, а затем запрашивая эти данные на моей странице? - person Blaine; 14.03.2021
comment
Именно так - person Ferran Buireu; 14.03.2021
comment
В итоге я нашел эту статью , но childImageSharp недоступен в поле изображения ... Я обновил исходный код. - person Blaine; 15.03.2021