ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: url preview favicon

Browse Source
This commit is contained in:
zerosoul
2022-06-07 17:53:46 +08:00
parent bceec5f238
commit 30f0327b17
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/URLPreview.js
+7 -5
View File
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useLazyGetOGInfoQuery } from "../../../app/services/message"; import { useLazyGetOGInfoQuery } from "../../../app/services/message";
import favUrl from "../../../assets/icons/favicon.default.svg?url"; // import favUrl from "../../../assets/icons/favicon.default.svg?url";
const StyledCompact = styled.a` const StyledCompact = styled.a`
background: #f3f4f6; background: #f3f4f6;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
@@ -111,7 +111,7 @@ export default function URLPreview({ url = "" }) {
getMetaData(url); getMetaData(url);
}, [url]); }, [url]);
const handleFavError = () => { const handleFavError = () => {
setFavicon(favUrl); setFavicon("");
}; };
if (!url || !data || !data.title) return null; if (!url || !data || !data.title) return null;
const { title, description, ogImage } = data; const { title, description, ogImage } = data;
@@ -125,9 +125,11 @@ export default function URLPreview({ url = "" }) {
</StyledDetails> </StyledDetails>
) : ( ) : (
<StyledCompact href={url} target="_blank"> <StyledCompact href={url} target="_blank">
<div className="favicon"> {favicon && (
<img onError={handleFavError} src={favicon} alt="favicon" /> <div className="favicon">
</div> <img onError={handleFavError} src={favicon} alt="favicon" />
</div>
)}
<div className="info"> <div className="info">
<h3 className="title">{title}</h3> <h3 className="title">{title}</h3>
<p className="desc dots">{description}</p> <p className="desc dots">{description}</p>