remix_img_quickstart_image_loader_and_component_setup.ts

1// app/routes/resources/image.ts
2import type { LoaderFunction } from "@remix-run/node";
3import { imageLoader, SharpTransformer } from "remix-img/server";
4
5export const loader: LoaderFunction = ({ request }) => {
6  const config = {
7    selfUrl: "http://localhost:3000",
8    transformer: SharpTransformer,
9  };
10
11  return imageLoader(config, request);
12};
13
14// app/routes/index.tsx
15import React from "react";
16import { Image } from "remix-img";
17
18export default function Index() {
19  return (
20    <div>
21      <h1>Remix-Img Quickstart</h1>
22      <Image
23        src="https://example.com/image.jpg"
24        width={500}
25        height={300}
26        alt="Example Image"
27        loaderUrl="/resources/image"
28      />
29    </div>
30  );
31}