0

这是用于首页。

我通过扫描一个充满图像的文件夹并创建节点，在 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 像素的“缩略图”（对于这个页面大小）。

任何想法表示赞赏。

4

1 回答 1

1

这是 gridsome 中记录的错误。此评论提供了解决此问题的方法。我已经测试了这个解决方案，它对我有用。直接复制到这里：

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

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>

宽度和高度不适用于此方法，这是解决方法：

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

<g-image class="responsive-image" :src="require(`!!assets-loader?width=250&height=250!@images/${projectImage}`)"/>
于 2020-07-15T14:13:46.607 回答