触发 onerror 时如何替换图像。反应js

Question

发生错误时如何重定向图片网址？因为这行不通。我需要 2021 年的解决方案。

编辑：因为我正在通过数组进行映射。如何在return 函数之前定义密码？

          const dispatch = useDispatch();
          const passwordList = useSelector((state) => state.passwordList);
          const { loading, error, passwords } = passwordList;
        
          const [imgSrc, setImgSrc] = useState(
            "`https://example.com/${password.url}`"
          );
        
          const handleError = () =>
            setImgSrc("https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png");
        
 

       <ul >
{passwords.map((password) => (
  <div>
    <li
      key={password.id}
     >
      <img
        src={imgSrc}
        onError={handleError}
      />
    </li>
  </div>
))}
</ul>
        

这是我正在尝试做的一个示例： https://jsfiddle.net/maccman/2kxxgjk8/3/

Answer 1

功能组件

import { useState } from "react";

const SomeComponent = () => {
  const [imgSrc, setImgSrc] = useState(/* original src */);

  const handleError = () => setImgSrc("https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png");

  return <img src={imgSrc} onError={handleError} />
};

类组件

import { Component } from "react";

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { imgSrc: /* original src */};
  }
  
  handleError = () => this.setState({
    imgSrc: "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png"
  });

  render() {
    return <img src={imgSrc} onError={handleError} />;
  }
}