Why doesn't this OnError function work in React?-CodePudding

I'm currently getting people's steam information from the steamAPI, however, some people have missing profile pictures(this is because some game's have missing PFP that you can get on steam, making a null image, an example I found is here:

Now, I'm trying to make an one rror function that will replace it with a default picture I have incase the image doesn't load, but all that happens is it keeps being very "glitchy" and not setting the profile picture, and continually trying to update the image.

Code:

import defaultpfp  from "../img/defaultpfp.PNG";
...

    function FixImg(e) {
        console.log("Found broken image: fixing")
        e.preventDefault();
        e.currentTarget.src = {defaultpfp}
        e.currentTarget.onerror = '';
    }

...

                            {users.map((user) => (
                                <tr key={user.pos}>
                                    <th>{user.pos}</th>
                                    <th><img alt="steampfp" className="steam-pfp" height={64} width={64} one rror={(e) => FixImg(e)} onClick={(e) => Redirect(e, user.url)} src={user.pfp} /> {user.name}</th>
                                    <th>{user.ragequits}</th>
                                </tr>
                            ))}

Why doesn't it seem to replace the image? I have double checked and set the src={defaultpfp} to check that the image was infact loading correctly.

CodePudding user response：

Don't use vanilla DOM methods in React - except when you absolutely have to and understand how they interact. The onError prop passed to the <img> React component is completely separate from the onerror property that the HTMLInputElement has; you can't overwrite the React prop from the DOM, and if you do manage to overwrite a particular property of an element, the next time the component renders, React may well rewrite that property with the prop React was passed.

To do what you want in a React way, the view should flow from the state. If you want a particular user's image to be able to toggle between active and default, that should be put into state. The nicest way to do this would be to change the users state so that it can have an additional optional property - perhaps call it useDefaultImage (or maybe hasErrored). Then all you have to do when mapping over a user is check if that property is truthy, and that will determine which src to set. All that's left is to update the state properly when an error is encountered.

{users.map((user, i) => (
    <tr key={user.pos}>
        <th>{user.pos}</th>
        <th>
            <img
                alt="steampfp"
                className="steam-pfp"
                height={64}
                width={64}
                one rror={user.useDefaultImage ? null : () => {
                    setUsers(users.map((user, j) => j !== i ? user : { ...user, useDefaultImage: true }));
                }}
                onClick={(e) => Redirect(e, user.url)}
                src={user.useDefaultImage ? defaultpfp : user.pfp}
            /> {user.name}
        </th>
        <th>{user.ragequits}</th>
    </tr>
))}

CodePudding user response：

Use e.target.src to set image one rror.

Check this example - https://codesandbox.io/s/reactjs-onerror-f7dq77