Inline queries don't handle embedded image links

[pstelzer]

trafficstars

What happened?

Embedded image links are handled correctly by list and table dataviews, but not by inline queries.

DQL

---
image-embed: "![[Obsidian.png]]"
---

`= this.image-embed`

JS

No response

Dataview Version

0.5.17

Obsidian Version

0.14.6

OS

Windows

[blacksmithgu]

This is because inline queries don't currently use react (which supports inline images) for their rendering; will see if I can get it to work.

[stecydube]

I just found out that I would need that myself 😁

Use case is I have a field with a link to a photo:

Photo:: [[pnoto.png]]

And I would like it to be displayed as an embed using inline query.

I tried the following without much success

dv.current().Photo

dv.fileLink(dv.current().Photo, true)

[scottmc42]

I can concur. I've been banging my head against the keyboard trying to get embed() to work. I have the note and the image in the same folder. I've tried with the yaml both with and without the braces.

---
image: "[[ScreenShot.png]]"
---
## This works as expected, so it knows where the image is and can display it normally
![image](ScreenShot.png)

## Shows the name as a link and hovering will show the image
`= link("ScreenShot.png")`

## Just shows the name as text, not a link any more
`= embed(link("ScreenShot.png"))`

## As expected, shows the name as a link and hovering will show the image
`= link(this.image)`

## embed() fails again; Just shows the name as text, not a link any more
`= embed(link(this.image))`

[fwolf]

Use inline query like this to generate markdown img tag:

`= "![b|150](" + this.imgUrl + ")"`

[scottmc42]

@fwolf , I just tried that code and it's still not showing up. If I remove the !, then it appears as a link to the correct image so I know the markdown works.

What does the b|150 mean? If this for a plugin?

[fwolf]

@fwolf , I just tried that code and it's still not showing up. If I remove the !, then it appears as a link to the correct image so I know the markdown works.

What does the b|150 mean? If this for a plugin?

It should work unless u change dataview's inline query prefix in config, in short its a "" + string + "" compute in a inline query.

The b|150 is markdown marker copy from other plugin generated content, to set the image display width, do not need any plugin to use it.

[scottmc42]

@fwolf , Here is the markdown I'm using:

---
name: "Sir Truumble Broomfodder"
image: "truumble-token.png"
race: "Kobold"
gender: "Male"
class: 
    - "Totem Barbarian"
level: 3
background: "City Watch"
hp: 32
ac: 19
modifier: 4
passive: 12
location: "Testville"
player: "Scott"
---

|    0  ![[truumble-token.png]]     |
|:-------------------------------:|
|  **Sir Truumble Broomfodder**   |
|  `= this.gender` `= this.race`  |
|         `= this.class`          |
|      Level: `= this.level`      |
| Background: `= this.background` |
| Currently in: `= this.location` |
|     Player: `= this.player`     |
|  1 `= "![[" + this.image + "]]"`  |
|  2 `= "![](" + this.image + ")"`    |

The image shows up when hardcoded (next to the 0). On the table row marked 1, it just displays the image name, not a link, and not showing the brackets. On the table row marked 2, I used your formatting example and nothing shows up; no image, no text.

[pstelzer]

@scottmc42, I actually wanted to use it for the same usecase as you do. The suggestion from @fwolf didn't work for me either. Neither did any form of embed(). The current workaround I'm using is via TABLE (also works with LIST). Borrowing from your example:

---
image: "![[truumble-token.png]]"
---

```dataview
TABLE WITHOUT ID
    this.image AS "Portrait" 
WHERE file.name = this.file.name
```

This also works with scaled images, e.g.:

---
image-wxh: "![[truumble-token.png|50x50]]"
image-w: "![[truumble-token.png|50]]"
---

The WHERE clause is necessary to prevent the table from fetching all files with the 'image' attribute.

[scottmc42]

@pstelzer , I'm aware of the dataview workaround. However, as shown in my above example, I'm trying to put the picture inside of an MD table. Unfortunately, that means I cannot use solutions that are multi-line.

[ggstrader]

@pstelzer , I'm aware of the dataview workaround. However, as shown in my above example, I'm trying to put the picture inside of an MD table. Unfortunately, that means I cannot use solutions that are multi-line.

you should probably be able to do it with inline js then if you use execute, would be ugly but possible

[lucastucious]

is second this, still no way to display img with inline queries

[Missionary-OSBS]

I hope embedded local images should work in inline query because all the URL image shortened links are now broken and I had a hard time to fix all of them...

[Worren]

Is this still not possible?

[GovSat1]

Is this still not possible?

+1 would love to see support for this as well, I think it will be a more common use case going forward with properties.

I suppose @blacksmithgu original response that inline queries do not use react has not changed

Another alternative would be to use an inline hidden field ie (photo:: ![[test.jpg]]) - doesn't work for all scenarios obviously.

[davidkopp]

In the Obsidian forum @holroy came up with a workaround that wasn't mentioned here:

---
cover: full/path/toImage.jpg
---
`$= dv.container = '<img src="' + app.vault.getResourcePath( dv.fileLink(dv.current().cover) ) + '" />' `

Source: https://forum.obsidian.md/t/using-metadata-of-pictures-inside-the-note/57514/9

For me that was helpful. Maybe for some others as well 😊