pivaleco / nuxt-image-loader-module Goto Github PK

In my current work around I am having a static website after running yarn build && yarn generate

in my <template> i have:

<nuxt-img class="gallery-item-image" style="background: url('/loader.svg')" :src="child.image.replace('/uploads/', '/')" image-style="small" :alt="child.title" />

in my <script> is:

created() {
      if (this.$store.state.menu) {
        for (let i = 0; i < this.$store.state.menu.length; ++i) {
          let menuParent = this.$store.state.menu[i].children
          for (let n = 0; n < menuParent.length; ++n) {

            if (menuParent[n].attributes.cover) {
              let attrs = menuParent[n]
              let img = menuParent[n].attributes.cover
              let cat = menuParent[n].attributes.gallery.gallery_cat
              let filename = img.substring(img.lastIndexOf('/') + 1);
              let menuThumb;

              console.log(filename)

              if (process.browser && !process.static) {
                menuThumb = '/' + filename + '?style=thumbnail'
              } else {
                menuThumb = '/image-styles/' + filename.substring(0, filename.lastIndexOf(".")) + "--thumbnail" + filename.substring(filename.lastIndexOf("."));
              }

              this.coverCats.indexOf(cat) > -1 ? null : this.coverCats.push(cat)

              this.coverItems.push({
                id: menuThumb.id,
                image: menuThumb,
                data: attrs
              })

              console.log(menuThumb)
            }
          }
        }
      }
    }

This an above a not well-working hack, how you can get it working for nuxt generate by changing around if (process.browser && !process.static) and run build and commit it to git.

... but it´s not 💯 nice ;)

So, my question is, is there any options to trigger the generation of images on nuxt build or nuxt generate?

maybe by adding a post request to the URL?
or sth in store/index.js at nuxtServerInit?

as it looks now I have to visit the page to trigger generation.

btw thank you for the super docs and clear git repo :)
and maybe if I understand better the generate trigger I could try to help with this implementation.

Cheers

Hello! Thanks very much for your work on this module, it is brilliant.

Can you point me in the right direction? I am looking for a way to point the URL to my s3 bucket e.g. https://s3.eu-west-2.amazonaws.com/assets.my-website.org/slides after statically generating my site.

Previously I was adding the string: https://s3.eu-west-2.amazonaws.com/assets.my-website.org/slides through a computed property in my code.

This method no longer works because this prevents nuxt-image-loader-module from finding the images and correctly generating my application. I need a way of pointing all image URLs to my s3 after this has been done.

How can I do this? What is the standard approach for this?

Many Thanks,

Simon

Is there a way to use a hash in the filenames of the images?

This is the current way nuxt does it and it will allow us to cache the image and load new ones once they update.

It's already possible to change the format of the binary content via an action:

'setFormat|jpg'

But the filename still remains of the original format.

E.g. if I need to always have a .jpg on the output, and input is .png after conversion, the contents of the file are JPEG, but the name still has .png.

Thanks!

Hi, first of all, big thank you for this component, it really brings the best of gulp processing-style into nuxt.

I'm facing an scenario where I npm run generate with forceGenerateImages and some of the "original" images can be missing. If that happens, the generate process stops. Is there any way to let the generate process run even if there are some missing images?

• Refactor index.js and plugin template to require a src library file that can be independently unit tested.
• Write ava tests
• Set up a task in CircleCI to run alongside existing e2e cypress browser tests
• Release as new major version as some internal APIs may change which people may be relying on for more complex set up.

My nuxt.config:

modules: [
    ['@pivale/nuxt-image-loader-module', {
      imagesBaseDir: 'assets/img',
      imageStyles: {
        thumbnail: { actions: ['gravity|Center', 'resize|320|180^', 'extent|320|180|+0|+90'] },
      },
    }],
  ],

I have images located in static/img which weren't loading.
I then tried moving my images to assets/img and I still can't seem to see them?

When I run yarn run dev, should a image-styles directory be created automatically? I don't see it.

Is there some way for me to force run the creation of images? I'm still wondering if I have graphicsmagick installed correctly. I ran brew install graphicsmagick.

Any clues what I might be doing wrong?

Hi.

Is it possible to add support for the WebP format?
There is a library for the "imagemin" that might help.

Thanks.

Replace calls to console.log and console.error with consola implementation for better console experience.

Hey Barry,

Currently with each new npm run generate, all images are generated again – I am wondering if it would be possible for this module to only write new images that don’t already exist in the dist?

I understand this might require altered images to be renamed / deleted manually but would save significantly on build times as otherwise it can take 10 mins or so to run through all the assets.

I am now resizing 90 images in 9 sizes each time – which causes my computer to crash (I will impose limits on Image Magick’s CPU usage in the meantime and see if this solves the crashing, but it would be helpful to have caching also!)

All Best,

Simon

Your newly added feature to support nuxt generate images works almost fine after deployment to netlify but in my a console error I see an error (which breaks e.g. @mouseleave="someFunc").

• images get displayed
• but error break some nuxt functions

a bit it looks related to an ES6 or ES5 issue in the component for nuxt-img but i am ont sure if this could be related to the combo with nuxt-pwa (Serviceworker).

maybe some include condition which isn´t browser valid or correctly transformt

Further, I would like to add a class to the img via :class but this wasn´t inherited to the component.

Finally i still have to generate image locally and commit them, have you faced this issue as well @barryrld ?

There’s quite substantial loss of quality using this plugin, which I’m sure suits some needs perfectly but it would be great if the quality could be user-controlled.

I want to use this for an image-heavy portfolio site but the quality lost is very noticeable and ideally I would be able to fine-tune the compromises made.

• Add credits for contributors and testers with thanks to those testing this module in the real world!
• Add a link to sponsor: Real Life Digital
• Set absolute path of intro image to absolute on github so that it can be displayed on other sites, e.g. npmjs.com
• Add force generate mention under 'Explanation of module options' section

Hello,
is there any way to make this module work with nuxt generate(and deplying to static hosting)?

Regards,
Mateusz Kurzempa

Thanks for a great project!

I am building a static site and everything works well when I npm run generate && npm start, but I receive 404 Not found for nuxt-img elements when using npm run dev.

Is the development server supported?

If i would use a lot of images it could be useful to define different independent source of images.

Or you could dream of array of an object with images (e.g. image collection from CDN)

@barryrld what do you think about this thoughts?

Is this correct, that only resizing with X and Y values is possible atm?

Could sth like the following work?

in nuxt.config.js at the imageStyles:{ ... }

thumbnail: { actions: ['gravity|Center', 'resize|320|auto', 'extent|320|180|+0|+90'] },

or

thumbnail: { actions: ['gravity|Center', 'resize|320|*', 'extent|320|*|+0|+90'] },

Hi,

First off, great module! 👍

I've been struggeling to get the forceGenerateImages feature to work.

Some relevant info:

• Running nuxt version 2.0.0
• Running nuxt-image-loader-module version 1.3.0
• Running nuxt in 'universal' mode

I've got the following settings:

    ['@reallifedigital/nuxt-image-loader-module', {
      imagesBaseDir: 'images',
      imageStyles: {
        placeholder: { actions: ['gravity|Center', 'resize|60', 'quality|40' ] },
        thumbnail: { actions: ['gravity|Center', 'resize|480|270', 'quality|95'] },
      },
      forceGenerateImages: {
        // imageStyle: globPattern
        placeholder: '**/*'
      }
    }]

I want all placeholders to be generated at build time. I've tried running build and generate, but nothing seems to trigger forceGenerateImages.
In other words, all images are only generated run time (per request).

At which step (build, start, generate) is this supposed to happen?
Am I missing somthing?

Hope you can help :)

I'm using nuxt-image-loader-module with @nuxt/content static generator, it so much useful.
But very beginning of project, there's no images in imageBaseDir, forceGenerateImages option shows an error when generate site.

      forceGenerateImages: {
        small: '**/*',
        medium: '**/*'
      },

ERROR No images were found in content using the glob pattern **/*

Please just ignore glob errors even if there's no images found.

When image style settings (imageStyles) are adjusted after an image was generated, the changes are not reflected and a rendered image is served.

Specifically, I changed from a macro to actions and changed the dimensions of the image.

Clearing the static/image-styles dir manually solves the problem of images being cached.

Ideally, components should be able to declare their own style with no need for it to exist in nuxt.config.js. For example:

<template>
  <div>
    <nuxt-img
      :src="testImage"
      :image-style="imageStyle"
      alt="Never forget alt tags!" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      testImage: '/test.png',
      imageStyle: {
        macros: [
          'scaleAndCrop|160|90',
        ],
      },
    }
  }
}
</script>

This would make components much more reusable across projects.

Hi!

I was wondering if there is planned support for srcset property on nuxt-image component? It would be great if I could pass srcset prop as an array of styles i.e. srcset=["small", "medium", "large"] and get the urls and sizes generated on img element as srcset="img--small.jpg 642w, img--medium.jpg 1284w, img--large.jpg 1926w", I'm just not sure if it is possible to generate multiple images.

Nice and clean coding style, by the way!