@tapie-kr/inspire-react/dist/esm/components/molecules/Image/index.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { container, image } from './styles.css.js';
import { radiusVars } from '../../../lib/style/contract/component.css.js';
import { Skeleton } from '../../atoms/Skeleton/index.js';
import { Box } from '../../miscellaneous/layout/Box/index.js';
import { useState, useMemo, useCallback } from 'react';
import { useMountedState } from '../../../hooks/use-mounted-state.js';

function Image(props){const[isLoading,setIsLoading]=useState(true);const isMounted=useMountedState();const src=useMemo(()=>isMounted?typeof props.src==="string"?props.src:URL.createObjectURL(props.src):"",[isMounted,props.src]);const handleLoadStart=useCallback(()=>{setIsLoading(true);},[]);const handleLoad=useCallback(()=>{setTimeout(()=>setIsLoading(false),props.delay??0);},[props.delay]);return jsxs(Box,{className:container,style:{width:props.fullWidth?"100%":props.width,height:props.fullHeight?"100%":props.height},children:[isLoading&&jsx(Skeleton,{width:props.width,height:props.height,fullWidth:props.fullWidth,fullHeight:props.fullHeight,borderRadius:radiusVars.none}),isMounted&&jsx("img",{className:image,src:src,alt:props.alt,style:{display:isLoading?"none":"block"},onLoadStart:handleLoadStart,onLoad:handleLoad,onError:handleLoad})]})}

export { Image };