Не удается заставить сетчатое G-изображение работать с сеткой миниатюр

Это для первой страницы.

Я создал коллекцию изображений в 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 пикселей (для этого размера страницы).

Любые мысли приветствуются.


gridsome image-processing
person rickb    schedule 29.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это задокументированная ошибка в gridsome. Этот комментарий дает обходной путь для решения этой проблемы. Я протестировал это решение, и оно у меня сработало. Копируем его сюда напрямую:

Перейдите в 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>

Ширина и высота не работают с этим методом, вот временное решение. для этого:

чтобы указать ширину / высоту / и т. д., вы добавляете строку запроса прямо перед путем. Таким образом, приведенный выше пример будет выглядеть следующим образом:

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