Image Shortcode not working with Vite

[simplerethink]

I'm using @11ty/eleventy-plugin-vite and @11ty/eleventy-img

Everything is working except the processed images are not outputting to ./_site/images/

My .eleventy.js:

const markdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')

const EleventyPluginNavigation = require('@11ty/eleventy-navigation')
const EleventyPluginRss = require('@11ty/eleventy-plugin-rss')
const EleventyPluginSyntaxhighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite')

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

const filters = require('./utils/filters.js')
const transforms = require('./utils/transforms.js')
const shortcodes = require('./utils/shortcodes.js')

const { resolve } = require('path')
const pluginTOC = require('eleventy-plugin-nesting-toc')

async function imageShortcode(src, alt, sizes = "100vw") {

	let srcPrefix = `./src/assets/images/`
	src = srcPrefix + src

	if(alt === undefined) {
	  // You bet we throw an error on missing alt (alt="" works okay)
	  throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
	}
  
	let metadata = await Image(src, {
	  widths: [300, 600],
	  formats: ['webp', 'jpeg'],
	  urlPath: "/images/",
	  outputDir: "./_site/images/"
	});
  
	let lowsrc = metadata.jpeg[0];
	let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
  
	return `<picture>
	  ${Object.values(metadata).map(imageFormat => {
		return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${sizes}">`;
	  }).join("\n")}
		<img
		  src="${lowsrc.url}"
		  width="${highsrc.width}"
		  height="${highsrc.height}"
		  alt="${alt}"
		  loading="lazy"
		  decoding="async">
	  </picture>`;
  }

module.exports = function (eleventyConfig) {
	// Plugins

	eleventyConfig.addPlugin(EleventyPluginNavigation)
	eleventyConfig.addPlugin(EleventyPluginRss)
	eleventyConfig.addPlugin(EleventyPluginSyntaxhighlight)
	eleventyConfig.addPlugin(pluginTOC, {
		tags: ['h2', 'h3'], // Which heading tags are selected (headings must each have an ID attribute)
		ignoredElements: ['a'],  // Elements to ignore when constructing the label for every header (useful for ignoring permalinks, must be selectors)
		wrapper: 'nav',       // Element to put around the root `ol`
		wrapperClass: 'toc',  // Class for the element around the root `ol`
		headingText: '',      // Optional text to show in heading above the wrapper element
		headingTag: 'h2'
	})
	eleventyConfig.addPlugin(EleventyVitePlugin, {
		tempFolderName: '.11ty-vite', // Default name of the temp folder

		// Vite options (equal to vite.config.js inside project root)
		viteOptions: {
			publicDir: 'public',
			clearScreen: false,
			server: {
				mode: 'development',
				middlewareMode: true,
			},
			appType: 'custom',
			assetsInclude: ['**/*.xml', '**/*.txt'],
			build: {
				mode: 'production',
				sourcemap: false,
				manifest: true,
				// This puts CSS and JS in subfolders – remove if you want all of it to be in /assets instead
				rollupOptions: {
					output: {
						assetFileNames: 'assets/css/[name].[hash].css',
						chunkFileNames: 'assets/js/[name].[hash].js',
						entryFileNames: 'assets/js/[name].[hash].js'
					}
				}
			}
		}
	})

	// Local IP for dev https://www.11ty.dev/docs/watch-serve/
	eleventyConfig.setServerOptions({
		showAllHosts: true,
		// https: {
		// 	key: "./localhost.key",
		// 	cert: "./localhost.cert",
		// },
	})

	// Filters
	Object.keys(filters).forEach((filterName) => {
		eleventyConfig.addFilter(filterName, filters[filterName])
	})

	// Transforms
	Object.keys(transforms).forEach((transformName) => {
		eleventyConfig.addTransform(transformName, transforms[transformName])
	})

	// Shortcodes
	Object.keys(shortcodes).forEach((shortcodeName) => {
		eleventyConfig.addShortcode(shortcodeName, shortcodes[shortcodeName])
	})

	eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)

	// Customize Markdown library and settings:
	let markdownLibrary = markdownIt({
		html: true,
		breaks: true,
		linkify: true,
        typographer: true
	}).use(markdownItAnchor, {
		level: [2, 3, 4],
		permalink: markdownItAnchor.permalink.ariaHidden({
			placement: 'after',
			class: 'direct-link',
			symbol: '#'
		}),
		slugify: eleventyConfig.getFilter('slug')
	})
	eleventyConfig.setLibrary('md', markdownLibrary)

	eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
	eleventyConfig.addLiquidShortcode("image", imageShortcode);
	eleventyConfig.addJavaScriptFunction("image", imageShortcode);


	// Layouts
	eleventyConfig.addLayoutAlias('base', 'base.njk')
	eleventyConfig.addLayoutAlias('tutorial', 'tutorial.njk')

	// Copy/pass-through files
	eleventyConfig.addPassthroughCopy('src/assets/css')
	eleventyConfig.addPassthroughCopy('src/assets/js')

	// TODO: Added due to issue https://github.com/matthiasott/eleventy-plus-vite/issues/2
	eleventyConfig.setServerPassthroughCopyBehavior("copy");
	eleventyConfig.addPassthroughCopy('public')
	// END TODO

	return {
		templateFormats: ['md', 'njk', 'html', 'liquid'],
		htmlTemplateEngine: 'njk',
		passthroughFileCopy: true,
		dir: {
			input: 'src',
			// better not use "public" as the name of the output folder (see above...)
			output: '_site',
			includes: '_includes',
			layouts: 'layouts',
			data: '_data'
		}
	}
}

If I change outputDir: "./_site/images/" to outputDir: "./public/images/" the folder and images get created, but won't copy to _site unless I run the build process twice.

Any ideas?

[simplerethink]

This is working for me. If someone has a better solution, please let me know.

rollupOptions: {
      output: {
          assetFileNames: (assetInfo) => {
              var info = assetInfo.name.split('.')
              var extType = info[info.length - 1]
              if (
                  /png|webp|jpe?g|svg|gif|tiff|bmp|ico/i.test(
                      extType
                  )
              ) {
                  return `images/[name][extname]`
              } else {
                  return `css/[name]-[hash][extname]`
              }
          },
          chunkFileNames: 'js/[name].[hash].js',
          entryFileNames: 'js/[name].[hash].js'
      }
  }