Fix QuickLinkIcon: Favicon immer aus URL ableiten wenn kein gespeichertes Icon, Fallback auf Emoji
This commit is contained in:
@@ -453,15 +453,31 @@ function QuickLinksCarousel({ links }) {
|
||||
}
|
||||
|
||||
function QuickLinkIcon({ l }) {
|
||||
const [imgOk, setImgOk] = useState(true);
|
||||
|
||||
// Favicon-URL bauen: gespeicherten Wert nehmen oder aus URL ableiten
|
||||
const faviconUrl = (() => {
|
||||
if (l.icon && l.icon.startsWith('http')) return l.icon;
|
||||
try {
|
||||
const host = new URL(l.url).hostname;
|
||||
return `https://www.google.com/s2/favicons?sz=64&domain=${host}`;
|
||||
} catch { return null; }
|
||||
})();
|
||||
|
||||
const showEmoji = !faviconUrl || !imgOk;
|
||||
const fallbackEmoji = l.icon && !l.icon.startsWith('http') ? l.icon : '🔗';
|
||||
|
||||
return (
|
||||
<a href={l.url} target="_blank" rel="noopener noreferrer"
|
||||
style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3,
|
||||
padding:'4px 2px', background:'rgba(255,255,255,0.04)',
|
||||
border:'1px solid rgba(255,255,255,0.08)', borderRadius:10,
|
||||
textDecoration:'none', height:48, width:'100%', boxSizing:'border-box', cursor:'pointer' }}>
|
||||
{l.icon && l.icon.startsWith('http')
|
||||
? <img src={l.icon} alt="" style={{width:16,height:16,objectFit:'contain'}} onError={e=>e.target.style.display='none'}/>
|
||||
: <span style={{ fontSize:16 }}>{l.icon}</span>}
|
||||
{!showEmoji
|
||||
? <img src={faviconUrl} alt="" style={{width:18,height:18,objectFit:'contain'}}
|
||||
onError={() => setImgOk(false)}/>
|
||||
: <span style={{ fontSize:16 }}>{fallbackEmoji}</span>
|
||||
}
|
||||
<span style={{ color:'rgba(255,255,255,0.65)', fontSize:8, fontFamily:'monospace',
|
||||
maxWidth:52, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{l.title}</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user