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

Having trouble displaying the week number in Angular Highcharts?

Having trouble bringing in a package into Next.js

The caniuse-lite data in Browserslist needs an update. To refresh it, kindly execute the following command: npx browserslist@latest --update

"Successfully rendering the map on the initial load, but encountering an error of 'cannot map undefined'

Leverage generic types and allow acceptance of objects with arbitrary keys

Importing a library dynamically in Next.js

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Is there a way to remove CSS based on the generated HTML code?

The yarn/npm package manager seems to be utilizing outdated code in an inexplicable way when paired with mocha and typescript

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

Questioning the syntax of a TypeScript feature as outlined in the documentation

Hold off on proceeding until the subscription loop has finished

A Guide to Catching Targeted React Notifications in Sentry using Next.js

Ways to resolve the issue: ""@angular/fire"' does not contain the exported member 'AngularFireModule'.ts(2305) in an ionic, firebase, and

Adjust the colors dynamically based on specific data within a loop

Error: Page Not Found in NextJs version 13.4

Having trouble with Visual Studio 2015 not compiling TypeScript within an ASP.NET Core project?

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Retrieving the input value using ref in Vue 3 and TypeScript

Navigate back to the initial page in Ionic2 using the navpop function