onError 在打字稿和反应中显示另一张图片

问题描述

我在解决 onError 状态时遇到了一些问题。我必须创建一个功能，如果 Gravatar 图像加载错误 404，显示我的网站上损坏的图像，则需要将图片更新为该目录或任何其他解决方案中名为 breakavatar.svg 的新图片。我尝试了很多方法，但仍然卡住了，没有任何反应。你能#helpme 伙计们:)？ 显示它的外观的图片： https://i.stack.imgur.com/S2EpD.png

这是我的代码：

员工图片.tsx

DigitsContainer

Employee.tsx

import glamorous,{ CSSProperties } from 'glamorous';

import * as React from 'react';

import { colors,dimensions } from 'src/styles';

interface Props {
    gravatar: string;
    status: string;
}

interface CircleProps {
    status: string;
}

const Circle = glamorous.div(
    (props: CircleProps): CSSProperties => {
        switch (props.status) {
            case 'available':
                return {
                    ':before': { backgroundColor: colors.magicMint,display: 'block' },};
            case 'remote':
                return {
                    ':before': { backgroundColor: colors.creamBrulee,};
            case 'notAvailable':
                return {
                    ':before': { backgroundColor: colors.terracotta,};
            default:
                return {
                    ':before': { backgroundColor: colors.white,display: 'none' },};
        }
    },{
        position: 'relative',margin: '0 16px 5px 17px',borderRadius: '50%',width: dimensions.pictureSize,height: dimensions.pictureSize,display: 'inline-block',background: colors.white,':before': {
            position: 'absolute',border: `4px solid ${colors.outerSpace}`,transform: 'translate(-6px,23px)',content: ' ',width: 10,height: 10,},);

const Avatar = glamorous.img({
    borderRadius: '50%',});

const AvatarDefault = glamorous.img({
    borderRadius: '50%',background: `url(${????#HELPME????}) no-repeat`,});



export function EmployeePicture({ gravatar,status }: Props): JSX.Element {
    return (
        <Circle status={status}>
            <Avatar onError={(e) => (e.target.onerror = null,e.target.src = {????#HELPME????})} src={gravatar} alt="User avatar" />
        </Circle>
    );
}

也许有其他方法可以做到这一点，或者即使错误 404 也可以显示来自他们服务器的默认 Gravatar 图片？但我认为更快的选择是这个 onError 状态处理程序？我看到了像 import * as moment from 'moment'; import { AvailabilityRecord } from '../../availabilities/models/availabilities'; import { User } from '../../user/models/user'; export interface Role { roleName: string; } export interface Workplace { workplaceName: string; } export type Employee = User; export interface EmployeeWithStatus extends Employee { status: string; } export interface EmployeesState { employees: Employee[]; isFetching: boolean; } export function getStatus(userAvailabilities: AvailabilityRecord[]): string { const currentDate = moment(); const isodate = currentDate.format(); if (!userAvailabilities) { return ''; } const record: AvailabilityRecord = userAvailabilities.find( (userRecord: AvailabilityRecord) => userRecord.start < isodate && userRecord.end > isodate,)!; if (!record) { return ''; } if (record.status === 'notAvailable') { return 'notAvailable'; } return record.workplaceName === 'Gliwice' ? 'available' : 'remote'; } 这样的 Vanilla JS 函数，但我如何实现它来做出反应 附注我是否需要 setState 来防止回调循环？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）