Image is missing required "src" property ?

[gurupal]

Why I am getting this weird error while passing image data. Image "src" is already defined.

Uncaught Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {"width":300,"height":500}

<div className={styles.image_container}> <Link href={/p/${encodeURIComponent(product.slug)}}> <a> <Image src={product.displayImage} alt={product.name} width={300} height={500} /> </a> </Link> </div>

[MathiasKandelborg]

It seems your {product.displayImage} value isn't set properly. Try console.log(product.displayImage) before that code, to see if the value exists.

[simondebbarma]

Facing this same error when trying to retrieve user image from next-auth via useSession(). It works with img but just refuses to with Image. I don't get it.

[zhyd1997]

Is there a minimal work example?

[GabenGar]

@spdebbarma

Facing this same error when trying to retrieve user image from next-auth via useSession(). It works with img but just refuses to with Image. I don't get it.

Image component is used for the images available at build time. Without additional fiddling with configs that means only files imported as modules and the files located inside public folder.

[ntcaetano]

Just put <img .... /> and write it in the first line of code: /* eslint-disable @next/next/no-img-element */

[martinemahirwe]

Facing this same error when trying to retrieve user image from next-auth via useSession(). It works with img but just refuses to with Image. I don't get it.

it works for me too. using Image is not gonna work when using session. better use the img as notmal

[rahadur]

I solve this issue by conditionally display Image component

{ product.displayImage ?
      <Image src={product.displayImage} width="300" height="500"  /> :
      <Image src={'/placeholder.png'}  width="300" height="500"   />
 }

[MathiasKandelborg]

That's not a solution, it's a workaround.

It doesn't solve the error, it doesn't do what it's supposed to, and it increases performance costs without any real benefit.

[sulemanelahi]

@MathiasKandelborg did you findout any better solution?

[0xrishavsharma]

I am also facing this issue. Sometimes the error shows up and sometime it doesn't.

I saw that when I was normally logging the property it was getting logged in the console properly.
But when I was using it in the src prop, Next JS was throwing me this error.

I don't know why this is happening 🥲

[ErickCSS]

I solve this issue with a conditionally like this:

{ product.displayImage && ( <Image src={product.displayImage} width="300" height="500" /> ) }

I hope i've helped you

[sahilbishnoi156]

it happens because your data is coming late so there is not 'src' value on that point.
You can also solve it like : (ensure that you must have a imageurl)
<Image src={product.displayImage || '/anyimagepath'} width="300" height="500" /> )
or you can use vercel svg logo it doesn't matter because it is just going to display for very small amount of time

[mohamed-farid-roushdy]

Thank you solved it

[natt-marketrue]

@sahilbishnoi156 your explanation help so much. I was so focus on error with size properties, and couldn't figure this out.

[sanmazum]

@sahilbishnoi156 , I applied the same logic but the image is still not getting loaded in the UI

[sahilbishnoi156]

@sanmazum I hope you have solved the problem to this point, but if anyone else having the same problem; You have to first import the image and then pass it in src attribute
import placeholderImg from "./yourimagepath"; <Image src={product.displayImage || placeholderImg} width="300" height="500" />

[LuchoMorla]

I have the same issue, i solved adding the operator AND:
{ product?.image &&

}

[hamedor]

I have th same issue, but in my case i needed to add this in next.config.js:

images: {
    loader: "default",
    domains: ["localhost"],
  },

Then i added absolute path in Image src:

<Image
      src={`http://localhost:1337${product.displayImage}`}
 />

[ninja-]

Just had another non-mentioned case to debug.
Looks like it was a leftover of migration from HTML <img I haven't noticed 👀

WRONG:

<Image
      src={myStaticImage.src}
 />

FIXED:

<Image
      src={myStaticImage}
 />

[synasapmob]

I think you should do with 'template literals'

<Image src={'${product.displayImage}'} /> symbols ' assume for `

[inezafrica]

Thanks so much...It worked form me

[amirsky799]

I had the same issue

Section Component

My Image Directory

And I got this error

Any Help ??

[synasapmob]

imageLaptop wrong path public/images/....

[sahilbishnoi156]

if your images are in public folder you don't have to write public just use / for root access.

[synasapmob]

sorry this is mistake when answered this question
one more time, i see picture above him used import directly then passed imageLaptop as an props so you can check with console.log(imageLaptop) you will recevied an Module now i will show you some examples

{
    blurDataURL: string
    src: string
    etc....
}

good thing right?, thereforce modify them by image={{ src: imageLaptop.src }}

[sahilbishnoi156]

This worked for me:
<Image src={routeUser?.image || '/any path you have'} />

[BoronenkoTimurs]

Hello,
Wanted to ask help with my case please. I'm using .map methode to show all images which I applied. But for some reason its show me error: Image is missing required "src" property: if I used just src{url}.
When I used src={ '/loading.jpg' || url} I try to applied 3 images, but got only one image with loading.png.

Thank you for help!

Code:

'use client';

import Image from 'next/image';
import { ChangeEvent, useEffect, useRef, useState } from 'react';

import Icon from '@/components/custom/icon/components/icon';
import { Button } from '@/components/ui/button';

interface ImageUploadFieldProps {
  disabled?: boolean;
  onChange: (value: string[]) => void;
  onRemove: (value: string) => void;
  value: string[];
};

const ImageUploadField: React.FC<ImageUploadFieldProps> = ({
  disabled,
  onChange,
  onRemove,
  value,
}) => {
  const [mounted, setMounted] = useState(false);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const onUpload = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;

    if (files) {
      const fileArray = Array.from(files);
      const newUrls: string[] = [];

      fileArray.forEach((file) => {
        const reader = new FileReader();

        reader.onloadend = () => {
          if (reader.result) {
            newUrls.push(reader.result as string);
            console.log('loh1');
            if (newUrls.length === fileArray.length) {
              console.log('loh2');
              onChange([...value, ...newUrls]);
            }
          }
        };

        reader.readAsDataURL(file);
      });
    }
  };

  return (
    <div>
      <div className="mb-4 flex items-center gap-4">
        {value.map((url) => (
          <div 
            key={url} 
            className="relative h-52 w-52 rounded-md overflow-hidden"
          >
            <div className="z-10 absolute top-2 right-2">
              <Button
                type="button"
                variant="destructive"
                size="icon"
                onClick={() => onRemove(url)}
              >
                <Icon name="trash"/>
              </Button>
            </div>
            <Image
              fill
              src={ '/loading.jpg' || url}
              className="object-contain"
              alt="Image"
            />
          </div>
        ))}
      </div>
      <input
        multiple
        type="file"
        ref={fileInputRef}
        disabled={disabled}
        className="hidden"
        onChange={handleFileChange}
      />
      <Button
        type="button"
        variant="secondary"
        disabled={disabled}
        onClick={onUpload}
      >
        <Icon name="plus" className="mr-2"/>
        Upload an Image
      </Button>
    </div>
  );
};

export default ImageUploadField;

[ErickCSS]

The url, have another parameter?, Because that will be the problem.

Example <Image src={"/loading.png" || url.image} />

[synasapmob]

Hello, Wanted to ask help with my case please. I'm using .map methode to show all images which I applied. But for some reason its show me error: Image is missing required "src" property: if I used just src{url}. When I used src={ '/loading.jpg' || url} I try to applied 3 images, but got only one image with loading.png.

Thank you for help!

Code:

'use client';

import Image from 'next/image';
import { ChangeEvent, useEffect, useRef, useState } from 'react';

import Icon from '@/components/custom/icon/components/icon';
import { Button } from '@/components/ui/button';

interface ImageUploadFieldProps {
  disabled?: boolean;
  onChange: (value: string[]) => void;
  onRemove: (value: string) => void;
  value: string[];
};

const ImageUploadField: React.FC<ImageUploadFieldProps> = ({
  disabled,
  onChange,
  onRemove,
  value,
}) => {
  const [mounted, setMounted] = useState(false);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const onUpload = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;

    if (files) {
      const fileArray = Array.from(files);
      const newUrls: string[] = [];

      fileArray.forEach((file) => {
        const reader = new FileReader();

        reader.onloadend = () => {
          if (reader.result) {
            newUrls.push(reader.result as string);
            console.log('loh1');
            if (newUrls.length === fileArray.length) {
              console.log('loh2');
              onChange([...value, ...newUrls]);
            }
          }
        };

        reader.readAsDataURL(file);
      });
    }
  };

  return (
    <div>
      <div className="mb-4 flex items-center gap-4">
        {value.map((url) => (
          <div 
            key={url} 
            className="relative h-52 w-52 rounded-md overflow-hidden"
          >
            <div className="z-10 absolute top-2 right-2">
              <Button
                type="button"
                variant="destructive"
                size="icon"
                onClick={() => onRemove(url)}
              >
                <Icon name="trash"/>
              </Button>
            </div>
            <Image
              fill
              src={ '/loading.jpg' || url}
              className="object-contain"
              alt="Image"
            />
          </div>
        ))}
      </div>
      <input
        multiple
        type="file"
        ref={fileInputRef}
        disabled={disabled}
        className="hidden"
        onChange={handleFileChange}
      />
      <Button
        type="button"
        variant="secondary"
        disabled={disabled}
        onClick={onUpload}
      >
        <Icon name="plus" className="mr-2"/>
        Upload an Image
      </Button>
    </div>
  );
};

export default ImageUploadField;

are you sure field of value.map not missing another URL?, can you print console them right now?

[MarlonEngFront]

I solved my case like this:
`import React, { useState, useEffect } from "react";
import Image from 'next/image';
import imageFallback from "../../public/img/portrait_not_found.png";

interface CarouselItemProps {
imageUrl: string | null;
title: string;
}

const CarolselItemNext: React.FC = ({ imageUrl, title }) => {
const [imgSrc, setImgSrc] = useState(imageFallback.src);
const [isLoading, setIsLoading] = useState(true); // Estado para controlar o blur

useEffect(() => {
if (imageUrl && imageUrl !== 'null') {
setImgSrc(imageUrl);
} else {
setImgSrc(imageFallback.src);
}
}, [imageUrl]);

return (

<Image
src={imgSrc}
alt={title}
layout="fill"
objectFit="cover"
className={isLoading ? 'filter-blur' : 'filter-none'} // Aplica o blur enquanto carrega
onLoadingComplete={() => setIsLoading(false)} // Remove o blur quando o carregamento termina
onError={() => setImgSrc(imageFallback.src)} // Define a imagem de fallback em caso de erro
placeholder="blur"
blurDataURL={imageFallback.src}
priority={false}
loading="lazy"
/>

{title}

);
};

export default CarolselItemNext;
`

[playstore777]

Thanks to Copilot, issue resolved.

I am not sure what is the exact fix, I tried to add null check but that didn't solve.
But Copilot fixed it, and the only thing which was added different was layout="fill" and objectFit="cover"

{imageURL && (
            <Image
              src={imageURL}
              alt="random-person-image"
              className={classes.image}
              layout="fill"
              objectFit="cover"
            />
          )}

It works

the error I got

Nope adding "width" etc didn't solve, but somehow the above code solved it!

[sahilbishnoi156]

Image component in next.js expect exact resolution of image for efficient rendering. So either you provide height and width attribute or you provide the layout attribute with position set to "relative" of parent component of Image Component. And their is no special or must use objectFit attribute it is just a style for image. Hope that helps