事实上，我并没有能成功测试（我以为自己是测试了，但是后来发现我做错了一点，导致实际上不构成测试）。我现在的vault已经不存在使用本地图片的这种需求了，要测试感觉也很麻烦。
新增：我稍微测试了一下，的确在windows端和android端都可以正常显示图片，但是加载很慢。这应该是由于代码中的I/O操作造成的。
我的意思是，可能用户输入会发生一些失误。不是指代码本身存在问题。
我只添加了一张图片，就已经感受到明显的加载时间了。看来这种方法应该不太可行。
这么看的话，把base64 形式的数据写到文件里，就是空间换时间了。我之前尝试过这种方式，会导致一个巨大的markdown文件。
这里倒是没关系。我可以把它的实现部分换成原来的逻辑。
我开了一个沙盒库，录制了一段视频。
可以看到，当仅仅需要显示一张大小为801 KB的本地图片时，就已经会造成感知非常明显的延迟。时长目测大概为0.8秒多。然而：
const Path2Base64 = async (cover) => {
if (cover.path) {
const start = Date.now();
const localImg = await app.vault.getAbstractFileByPath(cover.path);
const buffer = await app.vault.readBinary(localImg);
const base64 = obsidian.arrayBufferToBase64(buffer);
console.log(localImg.stat.size / 1024, "KB");
console.log(Date.now() - start, "ms");
return `data:image;base64,${base64}`;
}
return cover;
};
这里输出的数据是50毫秒左右。这让我感到十分疑惑。时间到底是用在哪里了？
是的。我之前的那个需求事实上已经消灭了。
我发现配合minimal的卡片视图使用时，点击图片的一瞬间，会闪过该页原版的表格视图。这个有什么办法解决吗？
20240706 14:52 更新
// 下面是该Block的全部配置内容
const SourceFolder = "Videos/Animes"; // 数据来源是一个文件夹
const coverField = "cover"; // 想要作为封面展示的yaml 键名
const ItemProperties = {
"封面": "$cover", // $cover会被替换为该Page的cover属性（以图片形式）
"链接": (p) => p.file.link, // 使用箭头函数，定义项目的每一个属性
};
// 配置结束
const pages = dv.pages(`"${SourceFolder}"`).filter((p) => p[coverField]);
const generateCoverLink = (cover, filePath) =>
`[](<${filePath}>)`;
Promise.all(
pages.map(async (page) => {
const coverUrl = page[coverField].startsWith("http")
? page[coverField]
: app.vault.adapter.getResourcePath(page[coverField]);
return Object.values(ItemProperties).map((value) =>
value === "$cover"
? generateCoverLink(coverUrl, page.file.path)
: value(page)
);
})
).then((tdata) => dv.table(Object.keys(ItemProperties), tdata));
1 个赞
配合 Minimal 的卡片视图使用时，点击图片的一瞬间，会闪过该页原版的表格视图
我使用这个话题里的代码没有出现过这个现象，只在使用 dv.paragraph() 生成 HTML 元素，再塞入表格的方法时才遇到过，改进为用 obsidian.MarkdownRenderer.render() 方法后就再也没出现过了，不知道你是不是这个情况？其他的就不好猜了。
大小为 801 KB 的本地图片 时长目测大概为 0.8 秒多
801KB 的本地图我这边加载是要不了 0.8 秒的。但是之前你说你那边比较慢，所以我下载了一些高清大图测试，确实有延迟，所以这个方法应该是不行的，数据偏差我也不太清楚具体原因。
你能解决问题就好。等以后有需求了，说不定也有新方法了。
240621 更新：
使用 app.vault.adapter.getResourcePath() 方法，成功在电脑和手机双端显示本地图片，代码已更新到 #1。谢谢你。
效果 GIF，点击展开
移动端测试从头加载 40 张每张大小为 1.87 MB 图片。
美中不足的是本来想把逻辑盘出来 没事了，见 #49。
桌面端的源码是怎样的？
没事了。桌面端和移动端的主要区别应该是前缀部分。
桌面端前缀是 app://...，通过下方代码可以找到：
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('file-url'))
移动端是 http://localhost/_capacitor_file_。现在直接凑或者找到移动端是如何生成这个前缀的就行了。
奇怪了，我做不出来，不知道哪个步骤错了