Resize image dataviewJS

What I’m trying to do

I want to resize an image in the output of dataviewJS

Things I have tried

within “normal” dataview i can get it via:

embed(link(image, "150"))

but in the map command in dataviewJS this wont work…
the line looks like this:

.map(k => [, k.image]))

embed is probably not supported here
how could this be achieved?

Not sure in your case, but dv.fileLink() should give you a hint.

This is the Syntax: dv.fileLink(path, [embed?], [display-name])

Set the second parameter to true, and the third parameter can be a number that set the width of the image.

In your example, should be like this:

.map(k => [, dv.fileLink(k.file.path, true, 150)])

I hope this helps you.

Should change k.file.path for k.image.path… sorry :sweat_smile:

Thank you for your effort, but
unfortunately not.
this is what dvjs spat out:

Evaluation Error: TypeError: Cannot read properties of undefined (reading 'path')
    at eval (eval at <anonymous> (plugin:dataview), <anonymous>:11:57)
    at (<anonymous>)
    at (plugin:dataview:8038:39)
    at eval (eval at <anonymous> (plugin:dataview), <anonymous>:11:14)
    at DataviewInlineApi.eval (plugin:dataview:18404:16)
    at evalInContext (plugin:dataview:18405:7)
    at asyncEvalInContext (plugin:dataview:18415:32)
    at DataviewJSRenderer.render (plugin:dataview:18436:19)
    at DataviewJSRenderer.onload (plugin:dataview:18020:14)
    at e.load (app://

my whole code:

let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)

for (let group of groups.sort(g => g.key, 'asc')) {
    dv.header(2, group.key);
		["file", "image"],
            .sort(k => k.objekttype, 'asc')
            .map(k => [, dv.fileLink(k.image.path, true, 150)]))


Well… dv.fileLink() is the way, but I’m not sure from where are you trying to get the image.

from folder one level above: “images”

└ A - Folder i call the dataview query
└ B - Folder with images

As I know, dv.pages() only gives you markdown files.

Try the next code:

let images = app.vault.getFiles().filter(file => file.parent.path == "images");
for (let img in images) {
	dv.paragraph( dv.fileLink( images[img].path, true, 150) );

You may change “images” from the first line to your images path.

Notice that, this will show every file at this folder, not just images.

1 Like

thank you!
yes, that throws me every image in that folder in size 150.
How do I implement this in my code above, to show only the requested files (images)…?

I guess you may filter, checking the file extension from the path.

well, all the files that point to the current file, resp grouped by objekttype:

I’m not sure how do you set the relation between pages and images, neither from where comes objekttype, but I guess you are done with the main topic:


well, lets say 50 %.
It is important to me to display only the relevant files and not all of them. :smirk:

More context is needed. Please define and explain which are the relevant files.

ok, sorry for the misunderstanding.
there are files witch contain among others:


objekttype: bitmap
image:: ![[image_001.jpg]]


objekttype: vector
image:: ![[image_003.jpg]]


objekttype: font
image:: ![[image_015.jpg]]

so, lets say I want a table with all files grouped by the objekttype and the displayed associated image.

like this:
file_1 … image_1
file_x … image_x

file_2 … image_3
file_x … image_x

file_3 … image_15
file_x … image_x

I hope, I could express myself properly.
Thanks for your patience.

I’ve just recreated your conditions using the code above

And it works for me:

The problem should be somewhere else.


Now I see where comes the error from!

Every page captured by dv.pages("[[]]") should have an image variable. If one page captured don’t have defined image, you’ll get the error shown before.

To fix it, only select the pages that have the variable defined:

let groups = dv.pages("[[]]").where( p => p.image)

And we are done! :wink:


Oh yes, that looks good. thank you very much!
But could it be modified, so that those objekttypes, that do not have a picture also appear? in other words, simply display nothing (“”) …?

well, on the basis of

I fiddled around:

let groups = dv.pages("[[]]")
	.groupBy(p => p.objekttype)

function ifimage(image) {
  if (image)
    return dv.fileLink(k.image.path, true, 50)
    return ""

for (let group of groups.sort(g => g.key, 'asc')) {

    dv.header(2, group.key);
		["Datei", "image"],
            .sort(k => k.objekttype, 'asc')
            .map(k => [, ifimage(k.image)]))


but DVJS mocks about the path:

Evaluation Error: TypeError: Cannot read properties of undefined (reading 'path')...```

too bad, would have been too easy... :slightly_smiling_face:
or where is my error of reasoning here?
1 Like

For starters you’ve got a typo within ifimage where you’re referring to k.image, and not just image.

There might be other errors, but start with correcting that one.

1 Like

thank you @holroy, yes this was the (one?) issue.
the correct line in the function has to be:

return dv.fileLink(image.path, true, 50)

and all the objekttypes are shown.

Normally I could live with that. However, if you know of any improvements or simplifications, it would of course be exciting to hear about them. :man_shrugging: :smirk: