Skip to content

A image file-loader module for next.js that includes meta data and lqip

License

Notifications You must be signed in to change notification settings

tinialabs/next-image-meta-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

next-image-meta-loader npm version license downloads

Features:

  • Enhanced file-loader Loads image assets directly into Next.js public folder no matter where the source file is
  • Sizing Looks up the size of the image and provides height, width and aspect ratio, for use in next/image and other optimizers (to prevent layout shift)
  • Rotates using EXIF data Before saving the image, rotates it using the EXIF data portrait/landscape if appropriate
  • Generates LQIP Calculates a 16px low quality image placeholder and provides as a BASE 64 data string to be embedded directly in HTML
  • Returns Meta Data Turns any import or require statement into an object that contains not only the file name but all the above meta data; works both server side and client side in Next.JS, compatible with SSG and SSR

Table of contents

Installation

npm install next-image-meta-loader next-compose-plugins

Add the plugin with next-compose-plugins to your Next.js configuration:

// next.config.js
const withPlugins = require("next-compose-plugins");
const nextImageMetaLoader = require("next-image-meta-loader");

module.exports = withPlugins([
  nextImageMetaLoader
  // your other plugins here
]);

Options

Option Default Type Description
contentThemeFolder './content/theme' string The folder where theme files including favicon are kept
imageMetaOutput './static/media' string The public folder where all output will be placed
imageMetaExtensions ['svg', 'png', 'jpe?g', 'gif', 'mp4'] Array The list of extensions to process
imageMetaName '[name].[hash].[ext]' string The naming convention of the output files

Usage

You can now simply import images in your projects directly from source folders.

   const meta = require('./images/narative-output.png')

  /** meta now contains: {
    width: 800,
    height: 600
    aspectRatio: 1.25,
    blurWidth: 16,
    blurHeight: 13,
    lqip: 'data:image/webp;base64,XXXXXXXX',
    src: 'static/media/XXXXX' // actual location of file in the Next.js public folder
    }
    */

With the right mdx component that does a require like the above, you can also include directly in MDX and get the advantage of lqip, lazy loading, next.js image optimization etc.. See next-theme-novela for an example of such an Image component.

![This is the alt text](./images/narative-output.png)

License

Licensed under the MIT license.

© Copyright Guy Barnard and Tinia Labs contributors

About

A image file-loader module for next.js that includes meta data and lqip

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published