Image processing Can'；t获取网格一些g-image以用于缩略图网格

这是头版

我在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”，我希望看到一个由小图像组成的网格，但事实并非如此。基本上，生成的输出只是浏览器将它们的大小缩小到大约300px（对于此页面大小）

任何想法都值得赞赏。

这是一个记录在gridsome中的文件。这为解决这一问题提供了一种解决方法。我已经测试过这个解决方案，它对我很有效。直接在此处复制：

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

保存文件并重新启动服务器。 然后在要使用图像的代码中，可以执行以下操作：

动态图像显示出来。这也适用于v-for内部。 作为参考，以下是我在我的站点中的v-For内部使用的代码：

截图

---

宽度和高度不适用于此方法，解决方法如下：

要指定宽度/高度/etc，请在路径前面添加一个查询字符串。因此，上述示例将变成：

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

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

<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>

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