Allow images in content collections folder to be used without relativ…

…e import prefix (#9755)

* adds the ./ prefix to the import statement for user

* remove accidental new line added

* add tests

* add changeset

* Update young-eyes-film.md

Co-authored-by: Sarah Rainsberger <[email protected]>

---------

Co-authored-by: Sarah Rainsberger <[email protected]>

.changeset/young-eyes-film.md

@@ -0,0 +1,15 @@
+---
+"astro": minor
+---
+
+Fixes an issue where images in Markdown required a relative specifier (e.g. `./`)
+
+Now, you can use the standard `![](img.png)` syntax in Markdown files for images colocated in the same folder: no relative specifier required!
+
+There is no need to update your project; your existing images will still continue to work. However, you may wish to remove any relative specifiers from these Markdown images as they are no longer necessary:
+
+```diff
+- ![A cute dog](./dog.jpg)
++ ![A cute dog](dog.jpg)
+<!-- This dog lives in the same folder as my article! -->
+```

packages/astro/src/vite-plugin-markdown/images.ts

@@ -4,7 +4,10 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html:
 	return `
 			import { getImage } from "astro:assets";
 			${imagePaths
-				.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
+				.map((entry) => {
+						const prefix = entry.raw.includes('/') ? '' : './';
+						return `import Astro__${entry.safeName} from ${JSON.stringify(prefix + entry.raw)};`;
+				})
 				.join('\n')}
 
 			const images = async function(html) {
@@ -23,7 +26,7 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html:
 													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
 													const imageProps = JSON.parse(match[1].replace(/"/g, '"'));
 													const { src, ...props } = imageProps;
-
+													
 													imageSources[matchKey] = await getImage({src: Astro__${entry.safeName}, ...props});
 													occurrenceCounter++;
 											}

packages/astro/test/core-image.test.js

@@ -480,7 +480,14 @@ describe('astro:image', () => {
 
 			it('Adds the <img> tags', () => {
 				let $img = $('img');
-				expect($img).to.have.a.lengthOf(7);
+				expect($img).to.have.a.lengthOf(8);
+			});
+
+			it('image in cc folder is processed', () => {
+				let $imgs = $('img');
+				let $blogfolderimg = $($imgs[7]); 
+				expect($blogfolderimg.attr('src')).to.include("blogfolder.jpg");
+				expect($blogfolderimg.attr('src').endsWith('f=webp')).to.equal(true);
 			});
 
 			it('has proper source for directly used image', () => {

packages/astro/test/fixtures/core-image/src/content/blog/one.md

@@ -12,3 +12,5 @@ refinedImage: ../../assets/penguin1.jpg
 # A post
 
 text here
+
+![](blogfolder.jpg)