How to use in Nunjucks?

[djmtype]

Sorry, I'm still having a hard time understanding, trying to get this to work inside my NJK file.
Receiving ,Error: Input file is missing .
I'm using the Eleventy Base Blog.

Please help!

.eleventyconfig

const Image = require("@11ty/eleventy-img");

module.exports = function(eleventyConfig) {
	eleventyConfig.addNunjucksAsyncShortcode("myImage", async function(src, alt, outputFormat = "jpeg") {
		let stats = await Image(src, {
			formats: [outputFormat],
			widths: [360, null],
			urlPath: "/img/",
			outputDir: "img/",
		});
		let props = stats[outputFormat].pop();
		if (alt === undefined) {
			throw new Error(`Missing \`alt\` on myImage from: ${src}`);
		}
		return `<img src="${props.src}" width="${props.width}" height="${props.height}" alt="${alt}">`;
	});
};

Nunjucks template:

{% myImage "someimage.jpg", "Some alt text" %}

[danielpost]

I think you're actually using it right, it just appears that the someimage.jpg path is incorrect. What's your directory structure and where do you keep your source images?

[djmtype]

@danielpost I'm using Zach's Eleventy Base Blog. I haven't altered the structure in any way. The input urlPath is /img/, is it not?

[danielpost]

What happens if you try this?

{% myImage "img/someimage.jpg", "Some alt text" %}

[djmtype]

@danielpost That's a step forward. It's generating images in the right directory. But, in the rendered html file (within _site), the src is undefined instead of the actual generated image name.

<img src="undefined" width="255" height="256" alt="Some alt text">

[djmtype]

I tried the <picture> example and that works – which I'll probably end up using regardless.

I went with the first example to test this out, thinking it would be the simplest implementation.