如何解决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 举报,一经查实,本站将立刻删除。