Skip to main content

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.

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>