Frontend integration

The data object provided from the image import is perfect for generating a responsive image. At the moment, there are no official front-end integrations for the IPP webpack loader, however, here are some framework-specific examples on how to approach a responsive image component.

React

Here is an example of a re-usable image component that accepts a SimpleExport object.

JavaScript

picture.js

/**
 * A reusable picture component.
 * @type {React.FC<{ image: import("@ipp/webpack").SimpleExport; alt: string } & JSX.IntrinsicElements["picture"]>}
 */
export const Picture = ({ alt, image, className, ...rest }) => (
  <picture {...rest}>
    {Object.entries(image.srcset).map(([mime, srcSet]) => (
      <source key={mime} type={mime} srcSet={srcSet} />
    ))}
    <img alt={alt} className={className} src={image.src} />
  </picture>
);

page.js

import { Picture } from "image.tsx";
import image from "path/to/image.jpg";

export default () => <Picture image={image} alt="Some mountains" />;

TypeScript

picture.tsx

import { SimpleExport } from "@ipp/webpack";

/** A reusable picture component. */
export const Picture: React.FC<
  { image: SimpleExport; alt: string } & JSX.IntrinsicElements["picture"]
> = ({ alt, image, className, ...rest }) => (
  <picture {...rest}>
    {Object.entries(image.srcset).map(([mime, srcSet]) => (
      <source key={mime} type={mime} srcSet={srcSet} />
    ))}
    <img alt={alt} className={className} src={image.src} />
  </picture>
);

page.tsx

import { Picture } from "picture.tsx";
import image from "path/to/image.jpg";

const Page: React.FC = () => <Picture image={image} alt="Some mountains" />;
export default Page;

Vue

Here is an example of a basic Vue picture component for SimpleExport (rough example).

Picture.vue

<template>
  <picture>
    <source
      v-for="[mime, srcset] in sources"
      :key="mime"
      v-bind:type="mime"
      v-bind:srcset="srcset"
    />
    <img v-bind:alt="alt" v-bind:src="src" />
  </picture>
</template>

<script>
  export default {
    props: {
      alt: String,
      image: Object,
    },
    computed: {
      src() {
        return this.image ? this.image.src : "";
      },
      sources() {
        return this.image ? Object.entries(this.image.srcset) : [];
      },
    },
  };
</script>

Page.vue

<template>
  <picture alt="Mountains" v-bind:image="image" />
</template>

<script>
  import Picture from "./components/Picture.vue";
  import image from "path/to/image.jpg";

  export default {
    name: "Page",
    components: {
      Picture,
    },
    created() {
      this.image = image;
    },
  };
</script>