#<Image /> with mardown

5 messages · Page 1 of 1 (latest)

fresh flame
#

hi i have 4 markdown which looks like
`---
title: Project Title
tags:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic nihil
aliquid dignissimos dicta a quod sapiente ipsum eligendi aut quo. Cum
aliquid expedita illo maxime temporibus? Nihil blanditiis quis sit!`

i'm looping through it to create a component for each of them
this way :

`const allProjects = await Astro.glob("../content/projects/*.md");
import { Image } from "astro:assets";
import dog from "../assets/dog.jpg";

{
allProjects.map((project) => (
<Image
class="rounded border-2 border-slate-200/10 transition group-hover:border-slate-200/30 sm:order-1 sm:col-span-2 sm:translate-y-1"
src={project.frontmatter.image}
alt={project.frontmatter.alt}
width="200"
height="48"
/> ) }`

but image doesn't show off, how could i manage this ? i tried by changing the image line in markdown file like this image: "../assets/dog.jpg" but then <Image/> doesnt convert the image as webp,
Any idea ?

ebon sapphireBOT
#

Hi @fresh flame. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems like you're trying to use the Astro's <Image /> component to display images from your markdown files. However, there seems to be a misunderstanding in how you're referencing the images in your markdown files and how you're using them in your Astro component.

In your markdown files, you're setting image: dog, but in your Astro component, you're trying to use this value as the src attribute in the <Image /> component. The src attribute expects a path to the image file, not just the name of the image.

To fix this, you should update your markdown files to include the relative path to the image file in your project. For example, if your image is located in an assets directory at the root of your project, you would update your markdown file to include image: ../assets/dog.jpg.

Then, in your Astro component, you should import the image and use it as the src attribute in the <Image /> component. Here's an example of how you can do this:

---
import { Image } from '@astrojs/image/components';
import dog from '../assets/dog.jpg';
---

<Image src={dog} alt="A dog" />

In this example, dog is the imported image file, which is then used as the src attribute in the <Image /> component.

However, there's a known bug in Astro where custom components for MDX files in content collections are not picked up correctly. This means that if you're trying to use a custom img component in your MDX files, it might not work as expected. You can find more information about this bug in this GitHub issue (https://github.com/withastro/astro/issues/7223).

#

If you're still having trouble, I would recommend checking out the Astro documentation on images (https://docs.astro.build/en/guides/images) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fresh flame kapa.ai is still learning and improving, please let us how it did by reacting below