dataviewjs 聚集的内容如何才能显示图片

疑问解答
23

只能说不会有太大差异，不存在换用JS就起飞或者变卡

1 个赞
24

测试过，转为resourcepath，也不能显示，用dv.table 也不成
dv.table([“Thumbnail”], [“”].map(item=>[item])
)

25

奇怪，不显示resoucepath，在[“”]里是

\ !(‘app://local/C:/MEDATA/UsedForGoodSync/%E8%8D%A310/Documents/Z_media/Pasted%20image%2020230526160344.png?1685325324833’)

26

提供些自己的测试记录:

首先, 如果把 dv 的 Automatic View Refreshing 禁掉, 情况会好些, 以前不能渲染的图 / 渲染后隔几秒消失的图, 也ok了

以下只讨论开启着 Automatic View Refreshing (默认开启), 且经过反复手动 “Dataview Force Refresh All Views and Blocks” 也还正常显示的方案


使用 dv.paragraph

简单使用 dv.paragraph 不行

dv.paragraph(`**test** text`);   // ok
dv.paragraph(`![[img.png]]`);    // 失败, 开始可以显示, 之后在 refresh 时消失
dv.paragraph(`test ==text2==`);  // ok

用 dv.paragraph 结合 fileLink 仍然不行

dv.paragraph(dv.fileLink(`img.png`, false));  // 链接, 悬停时ok
dv.paragraph(dv.fileLink(`img.png`, true));   // 嵌入, 开始ok, refresh 时几秒后失败 

var result = "";
result += dv.fileLink("img.png", true);
result += dv.fileLink("任意复杂! 的 中文图片-路径.png", true);
dv.paragraph(result)    // 同样失败 即使 img 路径命名简单也没用

查下文档, 感觉不该用手动拼接出 ![[xxx]] 的方案, 而应该把 dv 的 Link 对象直接放 dv.list / dv.table cell 里

使用 dv.list 结合 fileLink

终于可以了, 以下是自己测成功的样例

function dvlog(elem) {
  var result = `dvlog: ${elem}: typeof ${typeof elem}, constructor ${elem.constructor.name}, props ${Object.getOwnPropertyNames(elem)}`
  dv.paragraph(result);
}

const re = /!\[\[([^\]]+)\]\]/g;
// 从样例文本中摘出图, content 可以改成读任意笔记
const content = "上下文  ![[lumine.png]]  ![[paimon.png]]  上下文"
var result1 = "";
var result2 = [];
for (var match of content.matchAll(re)) {
	var img = match[1].toString().trim();   
    // dvlog(dv.fileLink(img, true));       // 是个 Dataview Link object
	result1 += dv.fileLink(img, true) + ' ';
    result2.push(dv.fileLink(img, true));   // 这里啥额外元素也不要带
}

dv.paragraph(result1); // 失败, 即使只有一个 Link object, 即使不拼接字符串, 也挂
dv.list(result2);      // 成功展示图片, 注意 list item 只能含图, 别加空格, 强制刷新后也 ok

dv.table 也能在单元格里正常显示图, 略


所以我觉得关键是别搞图文混排, 把图片简单放 list 或 table cell 里, 就能显示,
如果需要图文混排, 那么禁 Automatic View Refreshing 勉强也可用, 此时连更复杂的 dv.sectionLink 也正常

我感觉是 bug ref 可以等官方修
顺便发现了作者的下一代 dataview, 见 datacore 希望以后没这类问题了~

1 个赞
27

成功了，谢谢probe

我搜索了几天，文案都不靠谱

28

厉害厉害 :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1:

29

感谢楼主 :pray: :pray: :pray: :pray: :pray:

30

可以使用这将图片转为<img=“”>这种格式显示,具体参考dataview图片显示问题

31

感谢~ 原来转成本地绝对路径就可以认出来

32

但是 在安卓中无法正常显示

33

好的, 感谢提醒,
我自己倒是不太关心安卓, 如果有安卓的需求, 只能把现在这些手段综合考虑, 想办法凑个方案了…

34

目前可以导出pdf在安卓端查看 ,这个可以暂时满足需求

35

我使用的方法，移动桌面无区别
1，用probe的方法，图片过滤出来单独用dvlist显示显示，
发现两个问题，若是有yaml，也不显图片；paragraph 输出多个段落的文本，其他段落的行首中文空格缩进会被除掉。

2，把代码改造成quickadd脚本，我那quickaddjs 问题有同学提供的方法。
最完美，输出直接用ob渲染，不会有任何问题。
但quickadd 的capture无提供清空文本功能，只能追加。
quick add执行js打开文件，即使文件已打开过，仍在新标签打开

36

感谢,用quickadd好像确实是一个好办法

37

关于相对路径。
obsidian在处理粘贴或插入的图片，是转换为相对于当前MD的路径，我的图片是放在附件文件夹的，格式形如
…/Z_media/Pasted image 20230602164020.png

若dataviewjs处理的MD文件的层级和js文件所在层级一样，用dv.list能正确显示图片，但若是层级错了，就显示不出图片。
此前我以为是有YAML导致不显示，实际上是和YAML无关。

考虑把所有的…去掉，是否就能保证不会出现层级错？