0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-17 22:44:24 -05:00

Allow images in content collections folder to be used without relative 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 <sarah@rainsberger.ca>

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Oliver Speir 2024-01-31 13:59:06 +00:00 committed by GitHub
parent 7d937c1589
commit d4b886141b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 30 additions and 3 deletions

View file

@ -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! -->
```

View file

@ -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) {

View file

@ -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', () => {

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

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