Solid

The @responsive-image/solid package provides a native SolidJS image component.

Installation

In your application's directory:

npm

npm install @responsive-image/solid

yarn

yarn add @responsive-image/solid

pnpm

pnpm add @responsive-image/solid

Image component

The addon provides a <ResponsiveImage> component for rendering the set of images, taking local images or remote images as the src prop. Please refer to the main image component guide for all details and supported arguments!

Local images

To process local images you will need to setup one of the build plugins depending on your app's setup.

SolidStart

If your app is built with SolidStart, add the Vite plugin to your app.config.ts:

import { setupPlugins } from '@responsive-image/vite-plugin';
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  vite: {
    plugins: [
      setupPlugins({
        include: /^[^?]+\.jpg\?.*responsive.*$/,
      }),
    ],
  },
});

IMPORTANT

For more information on how to configure @responsive-image/vite-plugin and setupPlugins() refer to the Vite plugin documentation.

Remote images

The @responsibe-image/cdn package provides multiple helper functions to support remote images served from different image CDNs for use with the <responsive-image/> component.

Please refer to the image CDN guide for details on all supported options and examples of the respective image CDN.