Ensure final asset directory exists before writing cached files (#12418)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.changeset/thick-shrimps-hammer.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix cached image redownloading if it is the first asset

packages/astro/src/assets/build/generate.ts

@@ -153,6 +153,9 @@ export async function generateImagesForPath(
 		const isLocalImage = isESMImportedImage(options.src);
 		const finalFileURL = new URL('.' + filepath, env.clientRoot);
 
+		const finalFolderURL = new URL('./', finalFileURL);
+		await fs.promises.mkdir(finalFolderURL, { recursive: true });
+
 		// For remote images, instead of saving the image directly, we save a JSON file with the image data and expiration date from the server
 		const cacheFile = basename(filepath) + (isLocalImage ? '' : '.json');
 		const cachedFileURL = new URL(cacheFile, env.assetsCacheDir);
@@ -194,9 +197,6 @@ export async function generateImagesForPath(
 			// If the cache file doesn't exist, just move on, and we'll generate it
 		}
 
-		const finalFolderURL = new URL('./', finalFileURL);
-		await fs.promises.mkdir(finalFolderURL, { recursive: true });
-
 		// The original filepath or URL from the image transform
 		const originalImagePath = isLocalImage
 			? (options.src as ImageMetadata).src