![]()
setLoading(false)}
onError={() => setError(true)}
alt="Logo by Brandfetch"
className="icon"
src={src}
/>
{/* Fallback UI shown only when there's an error loading the logo */}
{isError && (
)}
);
};
```
Style your fallback mechanism with this CSS:
```css
.wrapper {
border-radius: 9999px;
position: relative;
overflow: hidden;
height: 128px;
width: 128px;
}
.fallback {
background-color: #eaeaea;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
height: 100%;
width: 100%;
}
.fallback p {
font-weight: bold;
font-size: 24px;
color: #666;
}
.icon {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
```
### How It Works
1. Initial render: Shows transparent placeholder image
2. After initial load: Attempts to load actual logo
3. Success: Displays logo
4. Error: Shows fallback UI with provided text
The key benefits of using a transparent placeholder is that users never see the default browser "broken image" icon.
### Using the LogoLink Component
The LogoLink component can be easily integrated into your React application. Here's how to use it:
```jsx