Support for images in fields

[SkepticMystic]

I am not sure if this is possible, but maybe it can be done.
I would like to be able to link to a remote or local image in a yaml field, and have dataview render that image in preview mode.

So something like:

---
image: ![](URLtoimage.com/image.jpg)
# OR
image: [](URLtoimage.com/image.jpg)
# OR
image: URLtoimage.com/image.jpg
---

Where you could then have a table calling for the image field

table image from ""

I know yaml won't render the image in preview mode, but perhaps dataview could have an image type which passes the image path to <img src="{{path}}"> or something.

[blacksmithgu]

Yes, that's possible. I'm wondering what the most convienent syntax would be - probably just the markdown link syntax (![]...), as you suggest?

[SkepticMystic]

For external images, I think [ ]( ) works. Ideally one shouldn't have to put an ! to make it work, but that's small.

Would this feature be able to work with local images to? I guess the img tag can take an internal src? Because then Wikilink images might work too ![[image.png]]

[symph0nic]

I like this idea too - using ![image] to show local images in a result table would be fab.

[calpa]

I like this idea

[nkoder]

Interesting! It might make my custom JS code obsolete.

Below I share my handmade image-from-frontmatter rendering approach for some "how do they overcome of such feature" context 😄

---

Currently, in YAML front matter I have e.g.:

thumbnail: "084 Interstellar Backdoor (x1).png"

then in dataviewjs I have:

const {DataviewHelpers} = customJS;

dv.table(
	[
		"thumbnail",
		"something else",
	],
	dv.pages(`"${dv.current().file.folder}"`)
		.filter(page => page.file.name !== dv.current().file.name)
		.map(page => [
			renderThumbnailOf(page),
			"other value",
		])
);

function renderThumbnailOf(page) {
	const path = `${page.file.folder}/${page.thumbnail}`;
	const containerStyle = `
		height: 100px;
		width: 100px;
	`;
	return `
		<div style="${containerStyle}">
			${DataviewHelpers.renderThumbnail({
				thumbnailPath: path,
				type: "bg",
			})}
		</div>
	`.trim();
}

and then, last but not least, shared helper function:

class DataviewHelpers {
    renderThumbnail({thumbnailPath, type}) {
        const abstractFile = app.vault.getAbstractFileByPath(thumbnailPath);
        const resourcePath = abstractFile
            ? app.vault.getResourcePath(abstractFile)
            : null;

        if (!resourcePath) return null;

        if (type === "bg") {
            const style = `
                width: 100%;
                height: 100%;
                background-image: url('${resourcePath}');
                background-repeat: no-repeat;
                background-position-x: center;
                background-position-y: center;
                background-size: contain;
            `;
            return `<div style="${style}"></div>`;
        }

        if (type === "img") {
            const style = `
                width: 100%;
                object-fit: contain;
            `;
            return `<img style="${style}" src="${resourcePath}">` ;
        }

        throw Error(`Thumbnail type "${type}" is not supported.`)
    }
}

---

Another use case I have is with multiple thumbnails (I render them all inside a single table cell), like:

thumbnails:
  - "066 Grumman F-11 Tiger - F11 Keycap (social media).png"
  - "067 Kung Fury Time Travel - Enter and Backslash Pipe Keycaps (social media).png"