Skip to content

Make replacing broken profile images with the placeholder smiley work #14

Open
@cirosantilli

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions