Rendering local images with dataviewjs

[Rubecks]

Hi. I just wanted to share a simple way I found to make dataviewjs render local images on both apps, desktop and mobile.

const filePath = (file) =>
    file.startsWith("http") ?
        file :
        app.vault.adapter.getResourcePath(file)

dv.table(["Name", "Thumbnail"], dv.pages("#Movie")
    .sort(item => item.file.name, 'asc')
    .map(item => [
        item.file.link,
        `![](${filePath(item.thumbnail)})`
    ])
)

The filePath() function just checks if the string starts with http, and converts it to an internal link otherwise, using the vault.getResourcePath function.

A minor inconvenience is that getResourcePath needs the full path to the images. So attachments/example.png works, but just example.png, ![](attachments/example.png) or ![[example.png]] doesn't. But It can easily be upgraded with more checks to parse wiki links, markdown formatted links, etc.

[lolbat]

Well this just saved me a lot of stress. Thanks

[blacksmithgu]

Limited support was added in the beta, but it requires directly creating links to the image via dv.fileLink().

[AB1908]

Cool, good to know

[Saorsa32]

I am very new to this and have no JS experience. In this section of the code, do I just change the word file to attachments/example.png to direct it to where I keep my own files or do I just leave it exactly as it is written above?

const filePath = (file) =>
file.startsWith("http") ?
file :
app.vault.adapter.getResourcePath(file)

[AB1908]

If you have no programming experience, I'd recommend staying away from JS. That said, the vault path should be fine.

[Saorsa32]

Thank you!