http://localhost:3000/[object%20Object] not found 404

Question

In my react app, this is an array of filenames I get from server side

const photos = ["01-1913.JPG", "01-1913.1.jpg", "01-1913.2.jpg"]

and here is how I use it with JSX

            {
              photos.map(entry => {
                return (
                <div key={entry}>
                <PhotoItem key={entry} url={`${process.env.REACT_APP_NODE_SERVER}/${entry}`} />
                </div>
                )
                })
            }

const PhotoItem = (url) => {
  return (
    <img
      src={url}
      onError={this.addDefaultSrc}
      alt="photoItem"
      style={{
        width: "500px",
        height: "600px",
        border: "1px solid #123C69",
      }}
    ></img>
  );
};
```

I can not figure out why I am not getting the photo (only the dummy photo from the onError event I've used) and if it has anything to do with the Object%object error. Any help would be appreciated.

The `entry` parameter is an object, not a plain string. Look to get a property from it or any in any other form. — Alejandro, Jun 01 '20 at 16:20
Also, don't put the server name into the url, just use the relative route and let the browser build the full url from it. — Alejandro, Jun 01 '20 at 16:20
I'm used to using TypeScript for my React so I may be wrong here, but isn't the passed in property of `PhotoItem` a generic `props` object, and therefor going to contain both a `key` and a `url`? (And you will need to use the url property on that misleadingly named `url` props object, e.g. `src={url.url}`) — DBS, Jun 01 '20 at 16:20
@DBS is correct. `url` will **always** be an object even if you only give one prop. You should rename it to `props` and access its property `props.url`, or destructure it `PhotoItem = ({ url }) =>`. — Brian Thompson, Jun 01 '20 at 16:26
You also don't need to give `PhotoItem` a `key`. Only the highest element within the `map` needs it. — Brian Thompson, Jun 01 '20 at 16:30
Thank you, I renamed it to props and got rid of the error. I still don't get the image though... — Morgana, Jun 01 '20 at 16:32

score 3 · Accepted Answer · answered Jun 01 '20 at 16:33

As mentioned in the comments, the PhotoItem component should look like this:

// Note that here props are named "props" instead of "url"
const PhotoItem = (props) => {
  return (
    <img
      src={props.url}
      onError={this.addDefaultSrc}
      alt="photoItem"
      style={{
        width: "500px",
        height: "600px",
        border: "1px solid #123C69",
      }}
    ></img>
  );
};

Note that the first argument that a react component receives is props. So even if you name it url, the value that you are looking for url lives in url.url.

I also recommend to deconstruct your props like this:

const PhotoItem = ({url}) => {
  return (
    <img
      src={url}
      ...
    ></img>
  );
};

score 1 · Answer 2 · answered May 28 '22 at 18:23

1

I faced this error on the developer console on a Next.js project right after upgrading Next from v10 to v12.

Turns out using an image as <img src={require()}/> is not working anymore, and throws this error.

Instead to fix the issue, you need to use Next's (almost) drop in replacement of Image component as;

import Image from 'next/image'
...
<Image src={require()}/>

This will fix the issue, if your Next project is throwing this error.

answered May 28 '22 at 18:23

Burak Tokak

1,810
1
20
27

You can also use `/* eslint-disable @next/next/no-img-element */` at the top of page or component if you really need the `img` . But using `Image` is ussually better (source: https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht ) – Berci Sep 13 '22 at 14:59

http://localhost:3000/[object%20Object] not found 404

2 Answers2