dataview图片显示问题

经验分享
,
11

测试过之后，发现有几种解决的办法解决dv.tavle的图片渲染：（dv的其他渲染函数几乎都能正常处理图片，而且个人蛮少用的）

  1. 把dv.table的cell内容套一层dv.span()之后再渲染，比如
...
// 使用 dv.span() 处理 content, 使得图片可以正常显示
contents = contents.map(content => dv.span(content))
return [...contents];

  1. 使用dv.fileLink()生成图片链接，比如 【已解决】DataView如何插入本地图片？ 和国外论坛中的 A brute force dataviewJS query to create a multi-column picture table - Share & showcase - Obsidian Forum

  2. 使用正则处理各种图片链接，比如原楼主的 dataview图片显示问题。 但是

return "<img src=\""+encodeURI(app.vault.adapter.basePath+"/13database/assets/"+p1)+"\">";

里面拼接成<img>标签时需要自定绝对路径，如果图片存在不同的文件夹可能会失效。我找了几个api优化了这种方式：

async function parsefile(file) {
    let filecontent = await app.vault.readRaw(file.file.path);
    filecontent = file.file.outlinks.values.reduce((acc, img) => convert_img(acc, img), filecontent);
    return filecontent;
}

其中的convert_img()如下：

function convert_img(content, img) {
    // 转换图片链接为img标签
    // 排除网络图片 ![](https://forum-zh.obsidian.md/uploads/default/original/2X/b/example.png)
    if (img.display === "") {
        // 处理 ![](Pasted%20image.png)
        console.log(img.display)
        const regex = /!\[.*?\]\((?!https?:\/\/).+?\)/;
        content = content.replace(regex, `<img src="${app.vault.adapter.basePath}/${img.path}">`);
    } else if (/^\d+$/.test(img.display)) {
        // 处理 ![[Pasted image.png|300]] 或 ![300](Pasted%20image.png)
        console.log(img.display)
        const regex = new RegExp(`(!\\[\\[.+?\\|${img.display}\\]\\])\|(!\\[${img.display}\\]\\((?!https?:\\/\\/).+?\\))`);
        console.log(regex)
        content = content.replace(regex, `<img src="${app.vault.adapter.basePath}/${img.path}">`);
    } else if (/\.(png|jpg|jpeg|webp|svg|gif)$/.test(img.display)) {
        // 处理 ![[Pasted image.png]]
        console.log(img.display)
        const pattern = `![[${img.display}]]`;
        // console.log(pattern)
        content = content.replace(pattern, `<img src="${app.vault.adapter.basePath}/${img.path}">`);
    } else  {
        // 处理 ![别名](Pasted%20image.png)
        console.log(img.display)
        const regex = new RegExp(`(!\\[.+?\\]\\((?!https?:\\/\\/).+?\\))`);
        console.log(regex)
        content = content.replace(regex, `<img src="${app.vault.adapter.basePath}/${img.path}">`);
    }
    return content
}

在读取完文件内容后，使用 convert_img() 过一遍，内容里面的本地图片链接应该就全部变成<img>标签了。

p.s. 测试版本 obsidian 1.5.12；Win 10