next-image-meta-loader

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
• Options
• Usage
• License

Installation

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

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

1// next.config.js
2const withPlugins = require("next-compose-plugins");
3const nextImageMetaLoader = require("next-image-meta-loader");
4
5module.exports = withPlugins([
6  nextImageMetaLoader
7  // your other plugins here
8]);

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.

1   const meta = require('./images/narative-output.png')
2
3  /** meta now contains: {
4    width: 800,
5    height: 600
6    aspectRatio: 1.25,
7    blurWidth: 16,
8    blurHeight: 13,
9    lqip: 'data:image/webp;base64,XXXXXXXX',
10    src: 'static/media/XXXXX' // actual location of file in the Next.js public folder
11    }
12    */

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.

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

License

Licensed under the MIT license.

© Copyright Guy Barnard and Tinia Labs contributors