Nuxt-image-extractor NPM

nuxt-image-extractor

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

Add nuxt-image-extractor dependency to your project

yarn add nuxt-image-extractor # or npm install nuxt-image-extractor

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'],
      }
    ]
  ]
}