Render images with dataviewjs

[Loup]

Hello !

I’m trying to render images with dataviewjs.

I’ve written a script that I use into several notes. In this script I have issues to use those lines :

image = dv.current().ID + ".jpg"
dv.span(`![[${image}]]`)

In each note I have

ID :: "IDxxx"

and each image is named “IDxxx.jpg”, (xxx being the number)

When I look at my notes in reading view, It just shows IDxxx.jpg but not the image. If I remove the ! from the script, It shows IDxxx.jpg as a link, but not the image.

What am I missing ? I’ve read dozens of help topics and I can’t figure it out…
Thanks

[holroy]

Which version of Dataview are you using? If not you’re on 0.5.64, you might want to update it, as some have reported it being more stable in the recent version.

If that doesn’t help, I’ve presented an alternate method for displaying internal images in the post below:

Embed internal images in dataviewjs table from frontmatter?

The most reliable way I’ve found to display an image, given proper links in a field/property is like the following: --- image: "[[myImage]]" --- ```dataviewjs dv.span('<img src="' + app.vault.getResourcePath(dv.fileLink( dv.current().image.path )) + '" />')) ``` You could also construct such monstrosities as the following if you don’t know whether your myField is one link or an array of links: ```dataviewjs const myField = dv.current().myField const myFieldType = dv.func.typeof(myField) if…

[Loup]

Yes I have the up to date version 0.5.64.
Thanks for your response, I’ve been able to display the picture in reading view using your code and adding the link in the note. But I have several hundred notes for which I need to do it ; as my images are named according the “ID ::” I already have in each note ; I tried to construct the link directly from your code, but I’ve been unsuccessfull. I tried to do it in the notes using this :

$= dv.fileLink(dv.current().ID + “.jpg”)
(At least it would be the same code to add to each note, still very long)

Despite the code appears as a link in the note, when I use it with or within your code, it doesn’t work :

const myField = dv.fileLink(dv.current().ID + ".jpg")
const myFieldType = dv.func.typeof(myField)
if ( myFieldType == "link" ) {
dv.span(imgDisplay(myField))
} else if ( myFieldType == "array" ) {
myField.forEach(i => dv.span(imgDisplay(i)))
} function imgDisplay(imageLink) {
return '<img src="' + app.vault.getResourcePath(dv.fileLink(imageLink.path)) + '" />' }

I’ll be very gratefull if you can solve this one !
Thanks for the help

[holroy]

I’m not sure what’s happening with my test vault currently, so it’s hard for me to test. I’m getting some non-logical errors when trying to run dataviewjs.

However, you should be aware that my script was written using "[[imageLink]]" in mind. This facilitates that the link when entering dataviewjs is fully qualified with a proper path. It should be equivalent to do a dv.fileLink() like you suggest, but what won’t work is your handling of an array of ID’s if that’s likely to happen. In your case it’ll try to render a list of strings expecting them to be links. That is no good.

Another advantage of using that other syntax for the image field, is that it’s recognised by Obsidian as a true link so if you rename images your version wont pick it up, but using a proper link will pick it up.

So what can you do while waiting for me to fix my test vault, or for someone else to answer? Open the developers tools, and switch to the console pane and see if there any error messages in there. And you could try the following which has some extra output logging:

```dataviewjs
const myField = dv.current().ID 
const myFieldType = dv.func.typeof(myField)
console.log("\n type: " + myFieldType)
if ( myFieldType == "string" ) {
  dv.span(imgDisplay(dv.fileLink(myField + ".jpg"))
} else if ( myFieldType == "array" ) {
  myField.forEach(i => dv.span(imgDisplay(dv.fileLink(i + ".jpg"))))
}

function imgDisplay(imageLink) {
  console.log(imageLink.path)
  console.log(imageLink)
  return '<img src="' + app.vault.getResourcePath(dv.fileLink(imageLink.path)) + '" />' 
}
```

For each run this should produce output like:

If it doesn’t, then somethings wrong, and please report back what it shows in the console pane of the Developers Tools.

[Loup]

Thanks again !

The Output is

type: string
VM1027:21 F2.jpg
VM1027:22 Link {path: ‘F2.jpg’, embed: false, display: undefined, subpath: undefined, type: ‘file’}

But now I could identify the issue : it’s looking for the image only at the root of my vault, but the images are in a sub/sub folder (different subfolders actually)

[holroy]

The file link would work, but when doing images you’ll need the full link path.

This could be done using that other reference, but then again that would require loads of changes at your end. The other option is to fully qualify the path using the getFirstLinkPathDest(). I’m away from my desktop computer, but there are examples in this forum on how to use this not so very long time ago.

[Loup]

Thanks for your help, you gave me the right direction to look for and I finally found a solution that’s working !

const myField = app.vault.getFiles().filter(file => file.extension === 'jpg' && file.path.includes('Images') && file.name.includes(dv.current().ID))
const myFieldType = dv.func.typeof(myField)
if ( myFieldType == "link" ) {
dv.span(imgDisplay(dv.fileLink(dv.current().ID + ".jpg")))
} else if ( myFieldType == "array" ) {
myField.forEach(i => dv.span(imgDisplay(i)))
}
function imgDisplay(imageLink) { return '<img src="' + app.vault.getResourcePath(dv.fileLink(imageLink.path)) + '" />' }```

[holroy]

As it stands the code will fail miserably if you provide more than one ID in that field, so you should remove the code related to the non link option of present yourself with an error message if that happens.

[Loup]

I’m not sure what you mean by the non link option

[holroy]

If the ID property in any of your files has multiple entries, your solution will fail. So I hinted that you should take care of that situation somehow.

Either by removing the logic in the code segment else if (myFieldType == “array” ) { … } , or even better by adapting your change of the myField with the app.vault.getFiles()... down into either the single case or multi-case scenario as the script was originally written.

Alternatively, you could detect if the ID has multiple option, and if so bail out of the script with a proper error message.

---

As it stands the script in your solution will only work if it has a single value for the ID property, and any other cases will just fail silently. That’s not very robust programming, as the script originally was made out to be to try to counter for just the possibility of the field to have multiple values.