无法让网格 g 图像适用于缩略图网格答案

【问题标题】：Can't get gridsome g-image to work for grid of thumbnails无法让网格 g 图像适用于缩略图网格
【发布时间】：2020-07-15 22:13:46
【问题描述】：

这是首页。

我通过扫描一个充满图像的文件夹并创建节点，在 gridsome.server.js 中创建了一个图像集合，每个节点都包含图像的名称和路径：

    let dir = fs.opendirSync(process.cwd() + '/static/images')
    let fd, fn, nameParts
    const imagesColl = actions.addCollection('images')
    while (!!(fd = dir.readSync())) {
      fn = fd.name
      nameParts = fn.split('.')
      imagesColl.addNode({
        name: nameParts[0],
        path: '/images/' + fn
      })
    }

    dir.close()

在标题页中，我正在为这些图像创建一个 4x2 网格。

graphql 查询如下所示：

  images:allImages {
    edges {
      node {
        name
        path
      }
    }
  }

然后在我的 vue 页面组件中，我正在使用这样的图像

...
  <div>
      <div class="grid grid-cols-4 shadow-xl">
      <g-image width="100" v-for="(edge, ix) of $page.images.edges" :key="ix"
           :src="edge.node.path" />
    </div>
  </div>

所以，集合创建得很好，我可以在页面中查询它们，但似乎根本没有调用 g-image 处理器。

我指定的宽度为“100”，我希望看到一个小图像网格 - 但它没有发生。基本上，生成的输出只是浏览器将它们缩小到大约 300 像素的“缩略图”（对于这个页面大小）。

任何想法表示赞赏。

【问题讨论】：

标签： image-processing gridsome

【解决方案1】：

这是 gridsome 中记录的bug。这个comment 提供了一种解决方法来解决这个问题。我已经测试了这个解决方案，它对我有用。直接复制到这里：

转到 gridsome.config.js 并在 chainWebpack 函数内为您的图像文件夹添加一个别名（您可能需要添加它）：

module.exports = {
  siteName: 'Jeremy Jackson',
  plugins: [],
  chainWebpack: config => {
    config.resolve.alias.set('@images', '@/assets/images')
  },
  templates: {}
}

保存文件并重新启动服务器。然后在你想要使用图像的代码中，你可以这样做：

<g-image :src="require(`!!assets-loader!@images/${imageUrl}`)"/>

动态图像出现了。这也适用于 v-for 。作为参考，这是我在网站的 v-for 中使用的代码：

<div id="project-images">
  <div class="section-header">Screenshots</div>
  <div class="row">
    <div 
      class="col-xs-12 col-sm-3 project-image"
      v-for="(projectImage, index) in $page.project.images"
      :key="projectImage"
      @click="openLightBox(index)"
    >
      <g-image class="responsive-image" :src="require(`!!assets-loader!@images/${projectImage}`)"/>
    </div>
  </div>
</div>

宽度和高度不适用于此方法，here's 解决方法：

要指定宽度/高度/等，您可以在路径之前添加一个查询字符串。所以上面的例子会变成：

<g-image class="responsive-image" :src="require(`!!assets-loader?width=250&height=250!@images/${projectImage}`)"/>

【讨论】：