Relative images in markdown files no longer being processed

[Kruptein]

I recently upgraded from astro-imagetools 0.5.8 to 0.6.10 (and astro from beta 17 to 44) and since then my relative images seemingly are no longer processed.

I'm talking about things like ![Alt](./assets/settings.png "Dm Settings") in pure .md markdown files.

In the past this would end up as something like:

<picture class="astro-imagetools-picture astro-imagetools-picture-8F238379" style="position: relative; display: inline-block; max-width: 100%; height: auto; --z-index:1; --opacity:0;"><source srcset="/assets/[email protected] 320w, /assets/[email protected] 632w" sizes="(min-width: 632px) 632px, 100vw" width="632" height="407" type="image/avif">
<source srcset="/assets/[email protected] 320w, /assets/[email protected] 632w" sizes="(min-width: 632px) 632px, 100vw" width="632" height="407" type="image/webp">
<img src="/assets/[email protected]" alt="Alt" srcset="/assets/[email protected] 320w, /assets/[email protected] 632w" sizes="(min-width: 632px) 632px, 100vw" width="632" height="407" loading="lazy" decoding="async" class="astro-imagetools-img" style="display: inline-block; overflow: hidden;max-width: 100%; height: auto;" onload="parentElement.style.setProperty('--z-index', 1);parentElement.style.setProperty('--opacity', 0);">
  </picture>

but now it ends up as <img src="./assets/settings.png"> which is not where the image is and thus gives a 404.

You can see this live in action here. There should be a missing image:

The sourcecode for that page can be found here (It's not a super big repository).

You can still see the old behaviour here which is an output from this PR in which I originally added astro to my site. (You can see the netlify output by clicking on the view details button)

[Kruptein]

Just did some trials with various versions of astro and astro-imagetools. The version of astro does not matter, it's specifically the change from 0.5.8 to 0.6.X that breaks images for me in markdown files.

[IanVS]

Thanks for looking into that. Was there a particular patch version of 0.6.x that this started, or was it right away in 0.6.0?

[Kruptein]

I originally tried with 0.6.10 but it seems to stop working from 0.6.0 onwards

[alvinometric]

Is this still happening @Kruptein ?

[Kruptein]

Is this still happening @Kruptein ?

As far as I can see, there hasn't been a new release? If so, then yes :D I've downgraded to 0.5 for now

[garfieldnate]

I'm also trying and failing to use relative image URL's, but I'm not sure if it's the same problem. I want to organize my pages so that each is in its own folder along with its image assets:

src/pages/posts/my-post/
├── images
│   └── my-image.jpg
└── index.md

In index.md I use a component that itself uses the astro-imagetools' <Picture> component. If I set the src attribute to ./images/my-image.jpg, the page fails to build with an error saying that the file couldn't be found:

node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: Input file is missing]

I can see here that the Picture component prepends a / at the beginning of the src path, which is clearly incorrect if the input was a relative URL.

If I try instead to simply put <img src="./images/nails.jpg"> directly in index.md, the image is apparently found and processed by imagetools but the generated URL is incorrect:

[serve]    404                  /posts/images/my-image.jpg

The last thing I tried was the simple markdown syntax ![alt text here](./images/my-image.jpg). This does work, but I can't apply any kind of styling.

[kissu]

Also, I'm not sure if it's the usual case but I tend to use aliases like images/twitter.jpg via the paths key of my tsconfig.json file. Could you also check that this one is working when the fix will drop? Thanks! 🙏🏻

[ChauhanT]

Hi, I am trying the markdown syntax. The relative paths do not seem to work at all! I'm on astro rc.4. I think the relative paths get picked up, but they are not rendered properly. In the file /writing/2021/random-title/random-title.md, if I have a ![random alt](./image.png), instead of an image, what is rendered is the text:

${renderComponenteb618d57($$result, "Pictureeb618d57", Pictureeb618d57, { "src": "/writing/2021/random-title/image.png", "alt": "random alt" })}

It broke after I updated my packages with npm update. Any advice on what might be going on and how to fix it?