collect-image-plugin
A webpack Plugin collect all images files to a js/ts file. you can use local images in MD/MDX file with this plugin. It should be evey helpful when use with next-mdx-remote.
Installation
yarn add collect-image-plugin
or
npm install collect-image-plugin
Usage
create a next.config.mjs
in your project
// next.config.mjs
import { withCollectImage } from 'collect-image-plugin'
import path from 'path'
/** @type {import('next').NextConfig} */
const nextConfig = withCollectImage({
collectImageOpts: {
searchRoots: [path.resolve('./posts')],
collectionFileDest: path.resolve('./posts/image_collection.js')
},
// other next config
})
export default nextConfig
with this config, all images files in searchRoots will be required/imported to collectionFileDest .
Then import collection and use getImageFactory util from collect-image-plugin
to getImage src
// pages/posts/[slug].tsx
import getImageFactory from 'collect-image-plugin/dist/getImageFactory'
// import the generated images collection
import collection from '../posts/image_collection'
import Image from "next/image";
const getImage = getImageFactory(collection)
export default function Post({ mdxContent, currentMdFilePath }) {
return <MDXRemote {...mdxContent} components={{img: props => <Image src={getImage(currentMdFilePath, props.src)} />}} />
}
export const getStaticProps = async (context) => {
// ...skip...
// must return currentMdFile absolute path(such as /Users/tom/blog-project/posts/some-file.md), which use to get image absolute path
return {
props: {
currentMdFilePath,
mdxContent,
}
}
}
Options
// withCollectImage(opts: Opts)
export interface Opts {
searchRoots: string[]
collectionFileDest: string
extensions?: string[]
ignore?: (imageAbsPath: string) => boolean
createImageId?: (imageAbsPath: string) => string
}