解决Umami统计网站缩略图无法显示的问题

282 字

1 分钟

解决Umami统计网站缩略图无法显示的问题

2025-04-21

未分类

无标签

是这样的，最近用上Umami之后几乎每次打开仪表盘界面那个网站的缩略图都无法显示，虽说不影响使用，但我还是决定解决一下。

问题分析#

右键在新标签页中打开，发现是调用了这个api

1
https://icons.duckduckgo.com/ip3/%domain%.ico

通过域名可以知道这个是duckduckgo这个搜索引擎的一个api，众所周知这个搜索引擎是无法在国内正常访问的，所以只要替换掉这个api就好了

问题解决#

经过一番阅读，发现处理图标的是这个文件

1
umami/src/components/common/Favicon.tsx

整个文件只有21行代码，相信各位在打开的一瞬间就已经知道怎么改了，我这里就简单贴个示例（api来源于必应搜索结果的第一篇文章）

1
import { GROUPED_DOMAINS } from \'@/lib/constants\';
2

3
function getHostName(url: string) {
4
const match = url.match(/^(?:https?:\\/\\/)?(?:[^@\\n]+@)?([^:/\\n?=]+)/im);
5
return match && match.length > 1 ? match[1] : null;
6
}
7

8
export function Favicon({ domain, ...props }) {
9
if (process.env.privateMode) {
10
return null;
11
}
12

13
const hostName = domain ? getHostName(domain) : null;
14
const src = hostName
15
? `https://api.xinac.net/icon/?url=${GROUPED_DOMAINS[hostName]?.domain || hostName}
16
: null;
17

18
return hostName ? <img src={src} width={16} height={16} alt=\"\" {...props} /> : null;
19
}
20

21
export default Favicon;