之前dataview索引出来的图片无法显示,经过不断尝试修改,感谢lazyloong大佬的指点和帮助.
现对dateview图片显示方法进行汇总:
- 只显示指定路径下的图片,可使用以下图片链接
- ![[图片名]]
-  其中相对路径前不需要加../
代码如下:
const term = "测试"
const files = dv.pages()
const b = files.map(async function(p){
var x = await app.vault.readRaw(p.file.path);
x = x.split("\n## ").filter(p=>p.slice(0,term.length)==term)[0];
x = x.replace(/!\[(.*?)\]\((.*?)\)/g, function(match, p1, p2) {
if (p2.startsWith("http")) {
// 如果是网络图片
return "<img src=\""+p2+"\">"
} else {
// 如果是本地图片，转换为<img>标签
return "<img src=\""+encodeURI(app.vault.adapter.basePath+"/"+p2)+"\">";
}
});
x = x.replace(/!\[\[(.*?)\]\]/g, function(match, p1) { //![[]]类型
// 转换为<img>标签
return "<img src=\""+encodeURI(app.vault.adapter.basePath+"/13database/assets/"+p1)+"\">";
});
dv.header(3,p.file.link);
dv.paragraph(x.slice(term.length));
dv.paragraph(app.vault.adapter.basePath)
})
其中app.vault.adapter.basePath先获取obsidin库地址再加相对路径
效果展示:
2.如果没有同步,多设备共享的要求可以去掉上面的路径代码只用<img>等部分
3,使用网图/图床等型式的图片,上述代码也可达成目的
或者只用
x = x.replace(/|![[.*?]]/g, function(match) { return match;});
也可达成目的
最后再次感谢lazyloong大佬
