Error: Failed to parse src "values.profile_photo" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

[BlackBatM4n]

i have this error when creating a new user a submit in the form.

can somme one help?

[hempun10]

This solution can be taken as a reference: https://stackoverflow.com/questions/69421831/failed-to-parse-src-error-when-importing-an-image-in-next-js

[BlackBatM4n]

i tried it still doesn't work i don't know why

[kashanhz999]

Have you got the issue resolved ????

[BlackBatM4n]

@kashanhz999 not yet,

[BlackBatM4n]

I have found the problem and the solution:

the "imgUrl" prop sent in the "UserCard" by the "RightSidebar" componets, sends "values.profile_photo" i dont know why.

my solution is:

      {imgUrl == "values.profile_photo"? <Image src={"https://img.freepik.com/free-vector/illustration-businessman_53876-5856.jpg?w=740&t=st=1691931290~exp=1691931890~hmac=8fe3fd3c00f89c1bbde9d5d3dff5a6d2b8163b88594c03f9d48695078eecff7a"} alt='user_logo' fill className='rounded-full object-cover'/> : <Image src={imgUrl} alt='user_logo' fill className='rounded-full object-cover'/>}

where the <Image> element was

I test the imgUrl prop and if it is a link, it pass, if not, just show a placeholder.

by the way if you use my solution u have to add { protocol: "https", hostname: "img.freepik.com", }, in next.config.js

[TenzDelek]

if u are passing the data through map and data in the data just give the photo name and then in the calling part give the path along with the data

[namgaxilem]

next/image is really bad, it do not show where the error actually occurs, I use so much <Image /> in source code and cant find the root cause

[JulianMiguelAngle]

In the 2012 we're just using PHP and some HTML, CSS. I don't know why Web Development become complicated

[loydcose]

I was able to solve it using the code below:

{list.map((item) => {
  const imageSrc = new URL(item.image).toString()

  return (
        <Image
          src={imageSrc}
          width={<width>}
          height={<height>}
        />
  )
})}

Or without iterating through maps*