Embed internal images in dataviewjs table from frontmatter?

[doe]

What I’m trying to do

I want to embed an internal image in a dataview table. The image will sit in a frontmatter property. I want to input [[image.jpg]] as the property (as opposed to ![[image.jpg]]), so it remains dynamic regardless of name or location changes.

e.g.

--- 
cover: [[image.jpg]] 
--- 

will show the image in a dataview table.
Following the documentation, I found you can use the meta function like so

dataview 
TABLE embed(link(meta(cover).path)) 
WHERE file.name = this.file.name 

and this has the desired effect, but I have other fields in the table that can only be achieved using dataviewJS. So I want to translate this result into dataviewJS.

Things I have tried

dataviewjs 
dv.table(["Cover"], 
    dv.pages() 
        .filter(p => 
                p.file.name === dv.current().file.name) 
        .map(p => [ 
            embed(link(meta(cover).path)) 
        ]) 
) 

Obviously doesn’t work as embed, link and meta aren’t defined.

Prior to this, because I had successfully been able to get the following to work for external images (i.e. those of type https://website.com/image.jpg)

.map(p => [
`![](${p.cover})` 
]) 

so I was trying to map

.map(p => [ `!${p.cover}` ]) 

or

.map(p => [ `![[${p.cover}]]` ]) 

or

.map(p => [ `![[${String(p.cover)}]]` ]) 

and several other variations, but these only return text.

I assume the best way would be to find the file path of internal image using dataviewJS, because that’s the method for base dataview. But I’m not bothered about the method, as long as it can convert properties of format property: [[image.jpg]] into an embedded image. Thanks for you help!

[holroy]

Does your code work as you’ve written it? I can’t see how that would come about, as your definition of the cover link, should be:

---
cover:  "[[image.jpg]]"
---

The point being that if cover is properly defined, you should be able to do cover.path within your dataviewjs script directly to access the different parts of the link. Try doing a console.log(cover) within your script to see how it behaves.

Still you’re entering a shady part of dataview with embedding stuff, which is a little bit random at times, as I’ve (and the issue I linked) indicates in this answer:

Transclusion of callouts with block link ID

This is a larger issue with Dataview which often has issues with embeds. It seems that only the images can somewhat reliable be embedded from within a dataviewjs script. Where the author of Dataview says: Dataview delegates to Obsidian markdown rendering which will not render transclusions at all, sadly.

[jpfieber]

I’m greatly interested in this as well, I’m hoping to do the same but with 1 or more pdf links in a frontmatter property. As you suggest, my links have quotes around them:

drugLabel:
  - "[[20240104 - ACME Pharmacy.pdf]]"
  - "[[20240102 - ACME Pharmacy.pdf]]"

I found this works with just one link, but not more (they show up as text):

```dataviewjs
const label = "!" + dv.current().drugLabel
dv.span(label)
```

Maybe this meets @doe 's needs as long as quotes are added to their links?

[holroy]

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 ( 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)) + '" />'
}
```

Replace the first dv.current().myField with your field name, and hopefully that should work consistently for you as it do for me!

[doe]

@holroy

Does your code work as you’ve written it? I can’t see how that would come about, as your definition of the cover link, should be:

---
cover:  "[[image.jpg]]"
---

Sorry, I had done it like this. I was using the Properties core, so I had forgotten to write the quotation marks on here.
Thanks for suggesting cover.path. It does return the right path, but again .map(p => [ `![](${p.cover})` ]) leads to nothing being displayed.

Here’s what I get from console.log()

• cover : Evaluation Error: ReferenceError: cover is not defined (in the codeblock, not the console)

• `cover` : cover

• p.cover : Link {path: '_imagestest/20240112_135340.jpg', type: 'file', subpath: undefined, display: undefined, embed: false}

• p.cover.link : undefined

• p.cover.path : _imagestest/20240112_135340.jpg

• `` : ![](_imagestest/20240112_135340.jpg)

• “” : ![](_imagestest/20240112_135340.jpg)

• “!” + p.cover : ![[_imagestest/20240112_135340.jpg|20240112_135340.jpg]]

• dv.span(“!” + p.cover) : <span alt="20240112_135340.jpg" src="_imagestest/20240112_135340.jpg" class="internal-embed">20240112_135340.jpg</span>

• dv.current().cover and variations worked the same as p.cover, except it wasn’t restricted to only working within the mapping.

The last two (dv.span & “!” + …) flashed the photo for about a second, then reverted to showing the text 20240112_135340.jpg in the table. The two prior show no photo and no text. Both of the results work if pasted outside of the codeblock, so I’m not sure.

[doe]

Thanks! I wish I had scrolled down before trying all of that because the first one here works for me Regardless I learned some new things so thanks for those as well. Are you able do determine the size of the image with this technique?