如何使用引导网格映射图像数组？

Posted 2023-03-08

【中文标题】如何使用引导网格映射图像数组？

【英文标题】：How can I use bootstrap grid mapping an array of images?

【发布时间】：2019-10-02 14:29:12

【问题描述】：

我正在使用 gatsby.js 构建一个投资组合网站。所有照片都发布在 wordpress 中，由 graphQL 获取并呈现到网站。

我正在尝试使用引导网格来组织照片并使其具有响应性，但由于 graphQL 返回一个包含从 wordpress 帖子中获取的所有图像的数组，因此我无法设置 class='row' 的 div 为 I' m 使用 array.map。而且我不知道怎么解决。

从 graphQL 我将分辨率设置为宽度 = 300 像素和高度 = 300 像素。

这是我发现组织尺寸的唯一方法，只要我不能使用类行并且所有图像都被视为一行。问题是照片尺寸没有响应，所以总是300X300...

我想要一种让它成为网格系统的方法，因为它应该可以工作......所以当我调整窗口大小时，所有照片都会被组织和调整大小。

const IndexPage = () => 
    const data = useStaticQuery(graphql`
        query 
            allWordpressPost 
                edges 
                    node 
                        title
                        featured_media 
                            localFile 
                                childImageSharp 
                                    resolutions(width: 300, height: 300) 
                                        src
                                        width
                                        height
                                    
                                
                            
                        
                    
                
            
        
    `);
    const imagesResolutions = data.allWordpressPost.edges.map(
        (edge) => edge.node.featured_media.localFile.childImageSharp.resolutions
    );
    return (
        <Layout>
            <Jumbotron />
            <div className="container">
                <h1 className="my-5 text-center">Portfolio</h1>
                imagesResolutions.map((imageRes) => (
                    <Img className="col-sm-6 col-lg-4 img-rounded img" resolutions=imageRes key=imageRes.src />
                ))
            </div>
        </Layout>
    );
;

【问题讨论】：

你解决了吗？

@ksav 我刚刚尝试过，它成功了！非常感谢

【参考方案1】：

如果您将data.allWordpressPost.edges 数组拆分为一个块数组，您可以循环遍历外部数组以呈现rows，并通过每个内部数组呈现cols。

对于 3 列自举网格，您希望传入大小值 3（在此示例中，它是 lodash.chunk 的第二个参数）。这样可以确保每个块的长度为 3。

这里是一个简单的例子，忽略了 graphql、childImageSharp 和 gatsby-image 的使用。

import ReactDOM from 'react-dom';
import React,  Component  from 'react';
import arrayChunk from 'lodash.chunk';
import 'bootstrap/dist/css/bootstrap.min.css';

const IndexPage = () => 

  const rawData = [1, 2, 3, 4, 5, 6];
  const chunkedData = arrayChunk(rawData, 3)

  return (
    <div>
      <div className="container">
        chunkedData.map((row, rowIndex) => 
          return (<div key=rowIndex className="row">
            row.map((col, colIndex) => return (<div key=colIndex className="col-sm">col</div>))
          </div>)
        
        )
      </div>
    </div>
  );
;

ReactDOM.render(<IndexPage />, document.getElementById('root'));

stackblitz