Make replacing broken profile images with the placeholder smiley work

[cirosantilli]

ac9f885 not working and https://stackoverflow.com/questions/66949606/what-is-the-best-way-to-have-a-fallback-image-in-nextjs/66953317#66953317 did not work on a react 12 hello world with img (not Image):

pages/index.js

import React, { useState } from 'react';
import Image from 'next/image';

const ImageWithFallback = (props) => {
    const { src, fallbackSrc, ...rest } = props;
    const [imgSrc, setImgSrc] = useState(src);
    return (
        <img
          {...rest}
          src={imgSrc}
          onError={() => {
            setImgSrc(fallbackSrc);
          }}
        />
    );
};

export default function IndexPage() {
  return <ImageWithFallback
    key="asdfqwer"
    src="asdfqwer"
    fallbackSrc="https://i.stack.imgur.com/jhDFt.png"
  />
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

The key code point is: https://github.com/cirosantilli/node-express-sequelize-nextjs-realworld-example-app/blob/ac9f885b254fa1baceb21e391a795f5c4c9e6bd6/components/CustomImage.tsx The original code from Chinese author was trying to handle that, but does not seem to be working.

At b278cce at least hidding the alt, but we want the placeholder.