Verifying the Presence of an Image in the Public Directory of Next JS

Question

Verifying the Presence of an Image in the Public Directory of Next JS

My TypeScript Next.js project contains a large number of images in the public folder. I am wondering if there is a way to verify the existence of an image before utilizing the <Image /> component from next/image.

I have managed to achieve this using plain JavaScript, but TypeScript presents some complexities. Moreover, I encountered an error message from Next.js stating:

The requested resource is not a valid image for /cars/audi-4.jpg received text/html; charset=utf-8

ImageError: The requested resource is not a valid image.

Is there a way to determine whether /cars/audi-4.jpg exists? If not, I would like to utilize a default image instead.

typescript next.js file-exists next.js13

Answer 1

Answer №1

src\app\page.js (Next.js 13 application)

Refer to the embedded comments for understanding the flow

import Image from "next/image";

// Utilizing HEAD method to inspect headers and status code
const isImageAvailable = async (imageName) => {
  return await fetch(`http://localhost:3000${imageName}`, {
    method: "HEAD",
  });
};

export default async function Home() {
  // initializing default image name
  let imageName = "/default.jpg";

  // specifying the targeted image, location might vary
  let anyExistingImage = "/one.jpg";

  // Check if the desired image exists in the public folder, otherwise fallback to default image
  const result = await isImageAvailable(anyExistingImage);
  if (result.status === 200) {
    imageName = anyExistingImage;
  }

  return <Image src={imageName} width={300} height={300} />;
}

Directory structure includes Public folder along with page.js for Next.js 13 app,

https://i.stack.imgur.com/kxpEs.png

This information should provide clarity

Answer 2

src\app\page.js (Next.js 13 application)

Refer to the embedded comments for understanding the flow

import Image from "next/image";

// Utilizing HEAD method to inspect headers and status code
const isImageAvailable = async (imageName) => {
  return await fetch(`http://localhost:3000${imageName}`, {
    method: "HEAD",
  });
};

export default async function Home() {
  // initializing default image name
  let imageName = "/default.jpg";

  // specifying the targeted image, location might vary
  let anyExistingImage = "/one.jpg";

  // Check if the desired image exists in the public folder, otherwise fallback to default image
  const result = await isImageAvailable(anyExistingImage);
  if (result.status === 200) {
    imageName = anyExistingImage;
  }

  return <Image src={imageName} width={300} height={300} />;
}

Directory structure includes Public folder along with page.js for Next.js 13 app,

https://i.stack.imgur.com/kxpEs.png

This information should provide clarity

Verifying the Presence of an Image in the Public Directory of Next JS

Answer №1

Similar questions

What is the proper way to define the scope for invoking the Google People API using JavaScript?

Getting the specific nested array of objects element using filter in Angular - demystified!

TypeDI is failing to recognize Services from a nearby external package

The Angular program is receiving significant data from the backend, causing the numbers to be presented in a disorganized manner within an

Determine the data type of a class property by referencing the data type of a different property within the

Transforming JavaScript into TypeScript within an Angular 4 component class

Error in Express Session: Property 'signin' is not found in type 'Session & Partial<SessionData>'. Code: 2339

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

Navigating through Next.js without using prefixes with Spree Commerce

Can you explain the concept of BuildOptions in Sequelize?

The specified data type is not compatible with the current context and cannot be treated as an array

Can Cloud Functions be used to establish a connection between Cloud Firestore and Realtime Database?

The successful conversion of Typescript to a number is no longer effective

Cannot detect react-script in the "npm run build" command when setting up the create-next-app project

Troubleshooting Issue with Mongoose Virtual Field Population

Creating a higher order component (HOC) that utilizes both withRouter and connect functions in React

Do these two syntaxes for fat arrow functions differ in any way, or are they essentially the same in function?

Using constant variables as arguments in functions in TypeScript

Angular 10 - Compilation errors caused by the element's location

Issue with Nuxt2 CompositionAPI: Unable to showcase imported render function in component - Error message states "template or render function not defined"