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 }) {
|
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 (
|
return (
|
||||||
<a href={l.url} target="_blank" rel="noopener noreferrer"
|
<a href={l.url} target="_blank" rel="noopener noreferrer"
|
||||||
style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3,
|
style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3,
|
||||||
padding:'4px 2px', background:'rgba(255,255,255,0.04)',
|
padding:'4px 2px', background:'rgba(255,255,255,0.04)',
|
||||||
border:'1px solid rgba(255,255,255,0.08)', borderRadius:10,
|
border:'1px solid rgba(255,255,255,0.08)', borderRadius:10,
|
||||||
textDecoration:'none', height:48, width:'100%', boxSizing:'border-box', cursor:'pointer' }}>
|
textDecoration:'none', height:48, width:'100%', boxSizing:'border-box', cursor:'pointer' }}>
|
||||||
{l.icon && l.icon.startsWith('http')
|
{!showEmoji
|
||||||
? <img src={l.icon} alt="" style={{width:16,height:16,objectFit:'contain'}} onError={e=>e.target.style.display='none'}/>
|
? <img src={faviconUrl} alt="" style={{width:18,height:18,objectFit:'contain'}}
|
||||||
: <span style={{ fontSize:16 }}>{l.icon}</span>}
|
onError={() => setImgOk(false)}/>
|
||||||
|
: <span style={{ fontSize:16 }}>{fallbackEmoji}</span>
|
||||||
|
}
|
||||||
<span style={{ color:'rgba(255,255,255,0.65)', fontSize:8, fontFamily:'monospace',
|
<span style={{ color:'rgba(255,255,255,0.65)', fontSize:8, fontFamily:'monospace',
|
||||||
maxWidth:52, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{l.title}</span>
|
maxWidth:52, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{l.title}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user