During full static generation, download all remote images and add them to the dist folder, replacing file names in html and static payloads
npm install nuxt-magpie/dist folder
nuxt version >= 2.14.0
fetch and asyncData calls when navigating to another route (as documented here). To prevent these calls from overriding the urls replaced by magpie, you can add a check in your fetch or asyncData to bail fetching if the requested data is already available.
nuxt-magpie dependency to your project
bash
yarn add nuxt-magpie # or npm install nuxt-magpie
`
2. Add nuxt-magpie to the buildModules section of nuxt.config.js
`js
{
buildModules: [
// Simple usage
"nuxt-magpie",
// With options
[
"nuxt-magpie",
{
/ module options /
}
]
];
}
`
3. Enable full static generation in nuxt.config.js:
`js
{
ssr: true,
target: 'static'
}
`
4. Run nuxt generate
Options
All options and their default values:
`js
{
path: '/_images', // dir inside /dist where downloaded images will be saved
extensions: ['jpg', 'jpeg', 'gif', 'png', 'webp'],
baseUrl: '', // only download images from a certain url (e.g. your backend url)
verbose: false, // show additional log info
concurrency: 10, // max concurrent image downloads
keepFolderStructure: false, // re-creates original image paths when saving local copies
replaceInChunks: true, // attempts to replace image urls in the generated javascript chunks
alias: null // see below for details
}
`
$3
You can provide aliases to be replaced before image lookup.
For example, Strapi doesn't return the full image urls when using the default upload provider, but instead uses the format /uploads/image-name.
You can use the alias option to make sure all image paths are parsed correctly:
`js
{
/ ... Magpie options /
alias: {
'/uploads': 'http://localhost:1337/uploads'
}
}
`
Development
1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev`