Get the first image of within content

[lanwin]

Hi, I want to create a receip view in Obsidian which looks like an Notion gallery view. The most example that I found user a field for the cover image.

But I want to use the first image within the content since I created my recipes so the image is at the top of the recipes. This is also like I created the list within Notion.

This there a way to select the first image in the note content instead of a field?

[Nitero]

dataviewjs:

async function getImageFromContent(notePath, index) {
    const content = await dv.io.load(notePath);
    const imageRegex = /!\[\[(.*?\.(png|jpg|jpeg|gif))\]\]|!\[.*?\]\((.*?\.(png|jpg|jpeg|gif))\)/gi;
    let images = [...content.matchAll(imageRegex)];
    if (images.length > index) {
        let match = images[index];
        if (match[1]) {
            return dv.span(`![[${match[1]}]]`);
        } else if (match[3]) {
            return dv.span(`![](${match[3]})`);
        }
    }
    return dv.span('No image');
}

(async () => {
    const rows = await Promise.all(
        dv.pages()
            .map(async p => {
                const noteLink = dv.span(`[[${p.file.path}|${p.file.name}]]`);
                const image = await getImageFromContent(p.file.path, 0);
                return [noteLink, image];
            })
    );
    dv.table(["Note", "Image"], rows);
})();

[holroy]

The first image in the content should of I'm not mistaken also be the first image in the file.outlinks list, so you should be able to check that with filter() and use that.

It could however be that you run into some slight issues as embedding and dataview are not always the best of friends.