Vue 或 React 中判断图片链接失效加载默认图

# 在 React 下

import React, { useState } from 'react';
import defaultImg from "../../default.jpg";
const Demo: React.FC = (props) => {
    // const { routes } = props;
    const [data, setData] = useState([
        "http://zhenglinglu.cn/images/article/20200601104216.jpg",
        "http://zhenglinglu.cn/images/article/20200601104216.jpg",
        "http://zhenglinglu.cn/images/article/20200601104216.jpg"
    ])
    const eleLi = data.map((url: string, i: number) => {
        return (
            <li key={i}>
                <img id={`reImg${i}`} src={url} onError={(e: any) => {
                    const reImg: any = document.querySelector(`#reImg${i}`);
                    reImg.src = defaultImg;
                    reImg.οnerrοr = null;
                }} />
            </li>
        )
    })
    return (
        <div className="warp">
            <ul> { eleLi } </ul>
        </div>
    )
}
export default Demo;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 在 Vue 下

html

<div>
    <img :src="item.image" @error="handleImgError" />
</div>

1
2
3

import defaultImg from "@/assets/images/cj.jpg";
export default {
 methods: {
    handleImgError(e) {
      let img = e.srcElement;
      img.src = defaultImg;
      img.onerror = null; //防止闪图
    }
}

1
2
3
4
5
6
7
8
9

#React

上次更新: 2024/01/30, 00:35:17

← React获取元素动态高度受控组件与非受控组件→