Open
Description
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.