githubGitHub
博客页面图片

博客页面图片

功能使用next/image组件提供的图像。本地保存的图片存放在文件夹中，路径为：/static/images/canada/[filename].jpg

因为我们使用的是mdx，所以我们可以创建一个简单的响应式flexbox网格，用一些顺风css类来显示我们的图像。

Gallery

Maple
Lake
Mountains
Toronto

Implementation

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>