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>
Last updated on by Marcus Cemes