Git Product home page Git Product logo

nuxt-image-extractor's Introduction

nuxt-image-extractor

npm version npm downloads

Nuxt image extractor for full static generated sites

This module is based on this gist from emiliobondioli.

It parses each generated page, downloads its images from your CMS API, stores them in a folder inside /dist and finally replace the HTML sources with the local paths.

  • Works with both nuxt generate and nuxt export commands.

  • Supports image url params like ?itok=gmJP5AbR.

  • It replaces payload image links as well, although this is not fully tested yet. So use with caution!

Setup

  1. Add nuxt-image-extractor dependency to your project
yarn add nuxt-image-extractor # or npm install nuxt-image-extractor
  1. Add nuxt-image-extractor to the modules section of nuxt.config.js
{
  modules: [
    [
      'nuxt-image-extractor',
      {
      	// (Required) CMS url
    	baseUrl: process.env.BASE_URL,

    	// (Optional) Dir where downloaded images will be stored
    	path: '/_images',

    	// (Optional) Array containing image formats
    	extensions: ['jpg', 'jpeg', 'gif', 'png', 'webp', 'svg'],
      }
    ]
  ]
}

License

MIT License

nuxt-image-extractor's People

Contributors

d1urno avatar daltonrooney avatar martysweet avatar snorpey avatar tullrich avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

nuxt-image-extractor's Issues

Substract certain file naming option

Works great! Maybe add an option to substract certain naming in files. For example, wp-content-uploads-2021-04-smartplug-van-woox.jpg to smartplug-van-woox.jpg. This is better for SEO :)

TypeError: page.html.matchAll is not a function

I'm getting this error during generation:

page.html.matchAll is not a function 10:04:41

at process (node_modules/nuxt-image-extractor/lib/module.js:35:31)
at Extract.nuxt.hook (node_modules/nuxt-image-extractor/lib/module.js:23:18)
at o (node_modules/hable/dist/hable.js:1:1052)
at o.then.o (node_modules/hable/dist/hable.js:1:270)

"page.html.matchAll is not a function" error on generate

Hi. Upon running generate the process fails citing this error. I'm running version 1.1.3 with nuxt version 2.14.0. Let me know if I can provide any extra information!

...
ℹ Generating output directory: dist/                                   08:52:29
ℹ Generating pages                                                     08:52:30

 FATAL  page.html.matchAll is not a function                           08:52:30

  at process (node_modules/nuxt-image-extractor/lib/module.js:48:31)
  at Extract.nuxt.hook (node_modules/nuxt-image-extractor/lib/module.js:26:18)
  at o (node_modules/hable/dist/hable.js:1:1052)
  at o.then.o (node_modules/hable/dist/hable.js:1:270)
  at process._tickCallback (internal/process/next_tick.js:68:7)


   ╭─────────────────────────────────────────────────────╮
   │                                                     │
   │   ✖ Nuxt Fatal Error                                │
   │                                                     │
   │   TypeError: page.html.matchAll is not a function   │
   │                                                     │
   ╰─────────────────────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate: `nuxt generate`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thomas/.npm/_logs/2020-10-19T21_52_31_009Z-debug.log

Multiple BaseUrls

Sometimes, projects require more than one CDN. Could we make baseUrl an array, so multiple CDNs can be used?

Cannot require image in the generate process

My problem is this:

  1. I require the image ~/dist/_images/storage-images-xxxx-yyyy-zzzzz.jpg)
  2. The first time I run nuxt generate I got: Module not found: Error: Can't resolve + image name and path
  3. I comment the require statement out and run the process again: nuxt generate
  4. This time all images are extracted, because there're in the nuxt dist folder
  5. When I delete the dist folder or the image isn't downloaded yet I got the same error: Module not found: Error: Can't resolve + image name and path
    Is there any workaround by this, I mean it's logical that It cannot require an image if it isn't set yet. Anyways, it's a nice module. Thank you!

still fetches from given urls

Hey,
If I open an URL downloaded images appear but if I route to the page it still loads all images using its original urls.

Doesn't work

I am using CKEditor 5, which is uploading images to Firebase Storage.

It says on the console several times: "ℹ nuxt-image-extractor replaced 15 image links in this payload "

But there is no images in the _images folder on dist and it still fetching the images from firebase.

Download images Contentful

Hi,

I'm using your plugin, but it doesn't seem to do anything...

  • No errors (build, generate, ... works)
  • No image downloaded
  • No templates adjusted with the /_images folder...

I'm trying to download the images from Contenful CMS.
Any knowledge? Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.