Dataview实例——随机展示笔记里的第一张图片，可以是外部链接或内部链接

2026-03-13 33点热度 0人点赞 0条评论

[!question] 随机展示#Movie 标签的封面，如何修改可以展示本地图片

要展示本地图片，核心在于 Obsidian 的内部链接格式（Internal Links）与网络链接（External Links）在正则匹配上的差异。

由于本地图片在 Obsidian 中通常以 ![[filename.jpg]] 或 ![[folder/image.png|200]] 的形式存在，我们需要调整 正则表达式 以及 路径解析逻辑 。

修改后的代码

你可以直接替换原有的 reg 定义和 Promise 里的渲染逻辑：

JavaScript

// 1. 定义排除文件夹和筛选条件
let nofold = '!"88-Template" and !"99-Attachment" and !"50-Inbox" and #Movie'

// 2. 更新正则表达式：同时兼容 ![[本地图片.jpg]] 和 ![描述](网络图片.jpg)
// 匹配 ![[...]] 格式的本地引用
let reg = /!\[\[([^\]]+\.(?:jpg|jpeg|png|gif|bmp|webp)(?:\|[^\]]+)?)\]\]/i 

let files = dv.pages(nofold).file
const arr = files.map(async (file) => {
    const sampleTFile = this.app.vault.getAbstractFileByPath(file.path);
    const content = await this.app.vault.cachedRead(sampleTFile); 
    const links = content.match(reg);
    
    if (links) {
        // links[1] 提取出类似 "image.jpg|200" 的内容，我们需要去掉 | 后的尺寸限制
        let imgName = links[1].split('|')[0];
        return { 'file': file.path, 'link': imgName };
    }
})

Promise.all(arr).then(values => {
    let flatvalues = values.filter(Boolean).flat()
    if (flatvalues.length === 0) return;
    
    const random = Math.floor(Math.random() * flatvalues.length)
    const target = flatvalues[random]
    
    // 3. 渲染逻辑：使用 Obsidian 内部链接格式 ![[...]]
    // 注意：这里为了保持跳转功能，外层包裹了 dv.paragraph 的链接
    dv.paragraph(\`![[${target.link}|220]]`)
})

关键改动说明

正则表达式更新 ：
- 旧正则：专门匹配 ![](url) 格式。
- 新正则：!\[\[([^\]]+\.(?:jpg|...))\]\] 。它会抓取 ![[...] 里的文件名。
- 添加了 i 标志（不区分大小写），确保 .JPG 和 .jpg 都能被识别。
清理图片后缀（Pipe 符号） ：
- 本地图片经常带有 |200 这样的尺寸标记。代码通过 split('|')[0] 确保只提取纯粹的文件名，否则 Obsidian 无法正确识别路径。
渲染方式 ：
- 本地图片最稳妥的展示方式是 ![[文件名]] 。
- 由于 Dataview 渲染 ![[...] 比较特殊，我将图片显示和文件跳转链接分成了两部分，这样既能看到大图，点击下方的文字又能直接跳转到对应的电影笔记。

💡 小提示

如果你的图片是存储在特定的附件文件夹（比如 99-Attachment ）里，只要该文件夹在 Obsidian 仓库内，上面的 ![[...] 语法就能自动找到它。

[!question] 改进一下，点击图片跳转

在使用 DataviewJS 渲染本地图片时，HTML 标签（如 <img> ）无法显示通常是因为 Obsidian 的 API 返回的资源路径需要特定的处理方式 ，或者 Dataview 的 dv.el 方法在处理某些 app:// 协议时被安全策略拦截。

我们可以通过 直接操作 DOM 节点 的方式来绕过这个限制，这是最稳妥的解决方法。

修正后的代码

请尝试使用这个版本，它直接创建 HTML 元素并注入路径：

JavaScript

let nofold = '!"88-Template" and !"99-Attachment" and !"50-Inbox" and #Movie'
let reg = /!\[\[([^\]]+\.(?:jpg|jpeg|png|gif|bmp|webp)(?:\|[^\]]+)?)\]\]/i 

let files = dv.pages(nofold).file
const arr = files.map(async (file) => {
    const sampleTFile = this.app.vault.getAbstractFileByPath(file.path);
    const content = await this.app.vault.cachedRead(sampleTFile); 
    const links = content.match(reg);
    
    if (links) {
        let imgName = links[1].split('|')[0];
        let imgFile = app.metadataCache.getFirstLinkpathDest(imgName, file.path);
        if (imgFile) {
            return { 
                'path': file.path, 
                'imgTFile': imgFile 
            }
        }
    }
})

Promise.all(arr).then(values => {
    let flatvalues = values.filter(Boolean).flat()
    if (flatvalues.length === 0) return;
    
    const random = Math.floor(Math.random() * flatvalues.length)
    const target = flatvalues[random]
    
    // 关键改进：使用内置方法获取正确的资源路径
    const imgSrc = app.vault.getResourcePath(target.imgTFile);
    const obsidianLink = \`obsidian://open?file=${encodeURIComponent(target.path)}\`;
    
    // 创建容器
    const container = dv.el("div", "");
    
    // 使用标准的 HTML 注入方式
    container.innerHTML = \`
        <a href="${obsidianLink}" style="display: block; width: 220px;">
            <img src="${imgSrc}" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
        </a>
    \`;
})