Разрезание массива изображений для галереи изображений - PullRequest
0 голосов
/ 27 апреля 2020

У меня есть два запроса к GraphQL. Один выводит массив журнальных PDF-файлов. Другой выводит массив изображений, показывающих обложки журнала PDF. Я хочу создать галерею изображений, где, если я нажму на изображение, оно приведет пользователя к соответствующему журналу PDF, из которого было получено изображение.

Мои запросы GraphQL

export const query = graphql`
query {
  pdfFile: allFile(filter: {extension: {eq: "pdf"}}) {
    totalCount
    edges {
      node {
        name
        id
        publicURL
      }
    }
  }
  pdfImg: allFile(filter: {extension: {in: "jpg"}, name: {regex: "/Cover/"}}) {
    totalCount
    edges {
      node {
        name
        id
        publicURL
      }
    }
  }
}
`

Мои Идея заключалась в том, чтобы постепенно slice через массив изображений. (0,1) возвращает первое изображение, (1,2) возвращает второе, (2,3) возвращает третье и т. Д. c. Я думал, что циклическое изменение переменных в моем методе slice выведет эти числовые приращения. Однако я возвращаю только последнее приращение (1,2) в моем текущем массиве из 2 изображений, поэтому два разных PDF-файла совместно используют одно и то же изображение, возвращенное из slice. Я упростил приведенный ниже код, чтобы показать только эту идею.

render() {
    const imgs = this.props.data.pdfImg.edges
    let prevImg = 0
    let nextImg = 1
    for (let i = 0; i < imgs.length; i++) {
        prevImg = prevImg + i;
        nextImg = nextImg + i;
    }
    return (
        <Layout>
            <a href={#}>
                {imgs.slice(prevImg, nextImg).map(({ node }) => (
                    <img alt="magazine cover" className="categoryPostImg" src={node.publicURL} />
                ))}
            </a>
        </Layout>
    )
}

Существует ли способ возврата каждой числовой пары значений (0,1), (1,2) и т. Д. С prevImg и nextImg переменные через slice?

Моя текущая проблема, когда я вывожу только (1,2), чтобы дважды показать одно и то же изображение, а не нужные (0,1) и (1,2), чтобы показать два разных изображения. Two different pdfs sharing the same cover img

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...