implementing image loading functionality in Next.js using TypeScript

Question

implementing image loading functionality in Next.js using TypeScript

I recently started working on building a website using NEXT.js with typescript. I have limited experience with typescript and currently facing an issue related to ImageLoader as cloudflare pages don't support the default image loader. However, I am unable to figure out why my code is not functioning properly.

Here is the snippet of my Loader code:

const normalizeSrc = (src: string) => {
  return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality: number;
}) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join(".");
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

And here is how I'm implementing the Image:

<Image
  loader={cloudflareLoader}
  src="/images/image-name.png" // the image is located in the public/images folder
  height={120}
  width={120}
  alt=""
/>

The error message that I'm encountering is:

Type '({ src, width, quality, }: { src: string; width: number; quality: number; }) => string' is not assignable to type 'ImageLoader'.
  Types of parameters '__0' and 'p' are incompatible.
    Type 'ImageLoaderProps' is not assignable to type '{ src: string; width: number; quality: number; }'.
      Types of property 'quality' are incompatible.
        Type 'number | undefined' is not assignable to type 'number'.
          Type 'undefined' is not assignable to type 'number'.

Any suggestions or insights on what steps should I take to resolve this issue?

I found some helpful information at

typescript next.js nextjs-image cloudflare-pages

Answer 1

Answer №1

Utilizing the type definition provided by next/image ensures that you are adhering to established types rather than creating your own, which enhances safety as it aligns with next's expectations.

To achieve this, follow these steps:

import type { ImageLoaderProps } from 'next/image';

export default function imageLoader({ src, width, quality }: ImageLoaderProps) {...}

Your code snippet would then look like this:

import type { ImageLoaderProps } from 'next/image';

const normalizeSrc = (src: string) => {
  return src.startsWith('/') ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }: ImageLoaderProps) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join('.');
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

Answer 2

Utilizing the type definition provided by next/image ensures that you are adhering to established types rather than creating your own, which enhances safety as it aligns with next's expectations.

To achieve this, follow these steps:

import type { ImageLoaderProps } from 'next/image';

export default function imageLoader({ src, width, quality }: ImageLoaderProps) {...}

Your code snippet would then look like this:

import type { ImageLoaderProps } from 'next/image';

const normalizeSrc = (src: string) => {
  return src.startsWith('/') ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }: ImageLoaderProps) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join('.');
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

implementing image loading functionality in Next.js using TypeScript

Answer №1

Similar questions

I'm having trouble with my Typescript file in Vscode - every time I try to edit the css code, all the text turns red. Can someone

Error: A stream was expected, but instead you provided an object that is invalid. Acceptable options include an Observable, Promise, Array, or Iterable

Session Timeout of 1 minute inactivity on OpenLiteSpeed with Next.js Application

Unexpected behavior when trying to catch errors in Node.js await block

Error: Attempting to access the 'subscribe' property of an undefined value (Observable)

Using the React Icon component as a prop in the Client Component within a NextJS application

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

Simpler method for organizing API route functions in NextJS

How can I display two slides at once in Ionic 2/3 on a wide screen?

Typescript - Stripping multiple characters from the start and end of a string/Retrieving attributes of a JSON list element

API data is being received, however, it is not being stored in the state

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

What is the TypeScript term for assigning multiple parameters an alias?

Generating dynamically loaded components in Angular 2 with lazy loading

Nuxt3 - TS2339: The 'replaceAll' property is not found on the 'string | string[]' type in Nuxt3

Formik button starts off with enabled state at the beginning

Reloading a Next.js website on an Apache server leads to a redirect back to the homepage

The presence of a method is triggering an Error TS2741 message stating that the property is missing in type

Error message encountered: The object contains unknown key(s): 'images' at "experimental" - Error in Next.js version 14.1.0