Strapi Image Downloader

Package on npmjs.com >>>

This package includes a script that downloads images from Strapi. It's particularly useful as a prebuild script for static JavaScript applications that use Strapi as a CMS. This allows you to store images as static assets, rather than loading them remotely.

• The script downloads all images that are used in any attribute of any Strapi record. It does not download images that are simply uploaded to the Media Library. Make sure, that the uploads GET endpoint of the Strapi API is set to public!
• All downloaded images are saved in their original version and in three resized versions (see the created uploads folder).

Installation

npm install strapi-image-downloader

or

yarn add strapi-image-downloader

Usage

saveMediaFromStrapi(strapiUrl, staticPath)

Here, strapiUrl is the absolute URL of the Strapi instance (for example, http://localhost:1337) and staticPath is the output folder, which should be the public or static in your app. Note, that the script creates a subfolder uploads.

Example

In a JavaScript application like SvelteKit or Next,create a prebuild.mjs file in the root directory with the following content:

import { saveMediaFromStrapi } from 'strapi-image-downloader';

saveMediaFromStrapi(process.env.PUBLIC_STRAPI_URL, 'public')

Note: 'public' is the default folder for static files in the app. Adjust it if necessary.

In your package.json, you can set the prebuild script to run prior to building:

  "scripts": {
    "dev": "node prebuild.mjs && next dev",
    "build": "node prebuild.mjs && build"

Now, you can use the image URL provided by Strapi (for example, post.data.attributes.headerImage.data.attributes.url) as the relative path now matches your downloaded image path.

Extra feature: Svelte and React components

In your Svelte (or SvelteKit) or React (only Next.js tested) app, you can use the built in StrapiImage component. For each image it uses the three downscaled versions processed by the saveMediaFromStrapi script in order to build a responsive image using image-srcset.

Usage example SvelteKit

<script>
  import { StrapiImage } from 'strapi-image-downloader';

  export let image;
</script>

<div class="hero-image">
  <StrapiImage class="w-100" src={image.attributes.url} alt="A red cat" />
</div>

Usage example Next.js

import { StrapiImage } from "strapi-image-downloader";

function MyComponent({ data }) {
  return (
    <div class="hero-image">
      <StrapiImage className="w-100" src={image.attributes.url} />
    </div>
  )
}

Development

Run npm link from this repository and npm link strapi-image-downloaderin the project you want to import this package from. After developing, unlink with npm unlink strapi-image-downloader

Make releases

Increae version number in package.json and then run npm publish