react+vite+ts裂图功能

Sruirui.

已于 2024-09-19 19:46:40 修改

阅读量271

点赞数 1

文章标签： react.js 前端前端框架

于 2024-09-19 14:50:26 首次发布

本文链接：https://blog.csdn.net/2401_85859147/article/details/142360021

版权

// 裂图功能组件
import React from 'react';

// 定义组件的属性接口
interface BreakOpenProps {
    src: string; // 图片的源 URL
    alt?: string; // 图片的替代文本（可选）
}

// 定义 BreakOpen 组件
const BreakOpen: React.FC<BreakOpenProps> = ({ src, alt = "加载失败" }) => {
    // 替换为图片加载失败时显示的裂图链接
    const crackedImage = "https://tse1-mm.cn.bing.net/th/id/OIP-C.aENmhjePh3GWOV_Z75sVUAAAAA?w=171&h=180&c=7&r=0&o=5&pid=1.7";

    return (
        <img 
            src={src} // 图片源
            onError={(e) => { 
                // 当图片加载失败时，替换为裂图
                (e.target as HTMLImageElement).src = crackedImage 
            }} 
            alt={alt} // 图片替代文本
            // style={{ width: '100%', height: 'auto', objectFit: 'cover' }} // 可选：调整图片样式
        />
    );
};


export default BreakOpen;