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);
})();