Images are not collected in Markdown files when using HTML syntax #872

ArmandPhilippot · 2024-03-22T18:06:07Z

Astro Info

Astro                    v4.5.9
Node                     v18.17.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The issue

Astro seems to support images co-location in content collections only when Markdown syntax is used. When using HTML syntax (ie. an img tag), the image is not processed and result in a 404:

If I use ![a working image](../assets/image.png), the image is processed and visible in the browser.
However, if I use <img alt="a failing image" src="../assets/image.png" />, the image seems to be ignored. I only see the alt text and the console shows a 404.

I think the issue comes from those lines in packages/markdown/remark/src/remark-collect-images.ts:

visit(tree, ['image', 'imageReference'], (node: Image | ImageReference) => {
	if (node.type === 'image') {
		if (shouldOptimizeImage(node.url)) imagePaths.add(node.url);
	}
	if (node.type === 'imageReference') {
		const imageDefinition = definition(node.identifier);
		if (imageDefinition) {
			if (shouldOptimizeImage(imageDefinition.url)) imagePaths.add(imageDefinition.url);
		}
	}
});

When using HTML syntax, the node type is html so the image is not collected by Astro. I guess we need to parse the HTML with a regex to collect the src attribute for all images encountered in the node.value.

Steps to reproduce

In addition to the Stackblitz link below, here are the few steps to reproduce the bug:

Create a new project: npm create astro@latest -- --template minimal (answer Yes to all and Strict to Typescript)
Create a folder to store our images and another for our posts in src/content: mkdir -p src/content/{assets,blog}
Put an image in src/content/assets
Create a Markdown file: touch src/content/blog/first-post.md
Add the image in that file with the two syntax (Markdown and HTML):

![a working image](../assets/image.png)

<img alt="a failing image" src="../assets/image.png" />

Edit src/pages/index.astro to load our post:

---
import { getEntry } from "astro:content";

const entry = await getEntry("blog", "first-post");
const { Content } = await entry.render();
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>{entry.data.title}</h1>
    <Content />
  </body>
</html>

Launch the server: npm run dev
Open the website in a browser and see the difference between the two images (you can also see a 404 in the terminal).

Additional context

I use a Git submodule to separate the content directory from the website code so I need to colocate the images with Markdown files. In addition, sometimes I want to wrap the images in a figure to add a figcaption so I need to write HTML inside the Markdown file.

What's the expected result?

I should be able to use both ![alt text](./path/to/an/img.jpg) and <img alt="alt text" src="./path/to/an/img.jpg" /> to render an image in a Markdown file.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-markdown-images?file=src%2Fcontent%2Fblog%2Ffirst-post.md

Participation

I am willing to submit a pull request for this issue.

The text was updated successfully, but these errors were encountered:

Princesseuh · 2024-03-22T18:31:05Z

At this time this is intentional. If you want to use a figure, you still can by putting newlines before and after:

<figure>

![]()

</figure>

should work.

Moving this to the roadmap repo, since this is more of a feature request than a bug

Princesseuh transferred this issue from withastro/astro Mar 22, 2024

withastro locked and limited conversation to collaborators Mar 22, 2024

Princesseuh converted this issue into discussion #873 Mar 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

Images are not collected in Markdown files when using HTML syntax #872

Images are not collected in Markdown files when using HTML syntax #872

ArmandPhilippot commented Mar 22, 2024

Princesseuh commented Mar 22, 2024 •

edited

Loading

This issue was moved to a discussion.

This issue was moved to a discussion.

Images are not collected in Markdown files when using HTML syntax #872

Images are not collected in Markdown files when using HTML syntax #872

Comments

ArmandPhilippot commented Mar 22, 2024

Astro Info

If this issue only occurs in one browser, which browser is a problem?

Describe the Bug

The issue

Steps to reproduce

Additional context

What's the expected result?

Link to Minimal Reproducible Example

Participation

Princesseuh commented Mar 22, 2024 • edited Loading

This issue was moved to a discussion.

Princesseuh commented Mar 22, 2024 •

edited

Loading