No markdown images are rendered

[cybrwshl]

After adding astro-imagetools to our astro project absolutely no images inside markdown files (embedded with ![]()) are rendered with imagetools. Only a simple <img> is displayed. What are we doing wrong? It doesn't matter if the image file is in the src/ or the public/ directory.

versions used:

• astro: 1.6.1
• astro-imagetools: 0.6.11

astro.config.mjs:

import { defineConfig } from "astro/config"
import tailwind from "@astrojs/tailwind"
import { astroImageTools } from "astro-imagetools"

export default defineConfig({
    publicDir: "./public", // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
    site: "https://dev.swablab.de",
    base: "/",
    integrations: [tailwind(), astroImageTools],
})

[eur2]

I'm also trying to optimize markdown images in astro and it doesn't seems there's a solution working for now…

[stephanbogner]

(1) I think the issue lies in this line: if (id.endsWith(".md") && regexTestPattern.test(code)) {

Reasons:

1. This excludes .mdx-files ...
2. ... but possibly more critical is regexTestPattern.test(code) because this tests for the image tag, but when I logged code it didn't seem to contain any Markdown/HTML. My assumption is that Astro changed their data structure at some point which is why it doesn't work anymore.

---

(2) This also seems to be a duplicate of #101 and #110.

---

(3) My workaround uses the code by @ChauhanT mentioned in issue #110

1. Download this file and save it somewhere as a .mjs-file, in my case ./remark-plugins/remark-astro-markdown-local-images.mjs

2. Adjust your astro.config.mjs-file

   Example astro.config.mjs-file content

import { defineConfig } from 'astro/config';
import { astroImageTools } from 'astro-imagetools';
import mdx from "@astrojs/mdx";
import image from "@astrojs/image";
import {remarkAstroLocalImages} from './remark-plugins/remark-astro-markdown-local-images.mjs'; // <- Important

// https://astro.build/config
export default defineConfig({
  site: "https://domain.de/",
  markdown: {
    remarkPlugins: [remarkAstroLocalImages()], // <- Important
    extendDefaultPlugins: true
  },
  integrations: [astroImageTools, mdx(), image()]
});

3. Run npm install unist-util-visit
4. Done, the plugin adjusts your file path and it should work

[eur2]

@stephanbogner Thank you for this workaround! I just have tried it but it doesn't seems doing anything. The image located in the body of a markdown is parsed and rendered but not optimize…

[djmtype]

@stephanbogner Can you post a Stackblitz or similar with this working? From my experience, inline markdown images are not being transformed by astro imagetools in either .md or .mdx files, and regardless if the image resides in /public or /src.

[stephanbogner]

@eur2 @djmtype Yeah, it's really weird. I thought it works but turns out it just looked like it works.

I reproduced an older version I did for a client that works correctly (even without the plugin by @ChauhanT) to see what might be the issue. It uses Node version 16.18.0, "astro": "1.0.0-beta.59" and "astro-imagetools": "^0.6.10":

I don't know which change between the Astro 1 beta and 1.8.0 did break things, but if I figure it out, I'll post it here.

[stephanbogner]

@eur2 @djmtype Yeah, it's really weird. I thought it works but turns out it just looked like it works.

I reproduced an older version I did for a client that works correctly (even without the plugin by @ChauhanT) to see what might be the issue. It uses Node version 16.18.0, "astro": "1.0.0-beta.59" and "astro-imagetools": "^0.6.10":

I don't know which change between the Astro 1 beta and 1.8.0 did break things, but if I figure it out, I'll post it here.

But it does seem indeed that the file I mentioned above is the key. Because if I log the code-variable with the astro beta, this is the output:

export const metadata = { "headers": [], "source": "\nTest\n\n![The Bogner Projection](bogner-projection-preview.png)", "html": '<p>Test</p>\n<p><img src="bogner-projection-preview.png" alt="The Bogner Projection"></p>' };
export const frontmatter = { "title": "Test The Bogner Projection", "description": "Understanding map projections by inventing one", "slug": "bogner-projection", "client": "Self initiated", "budget": "None", "cover-video": "bogner-projection-animated.mp4, bogner-projection-animated.webm", "cover-image": "bogner-projection-preview.png", "astro": { "headers": [], "source": "\nTest\n\n![The Bogner Projection](bogner-projection-preview.png)", "html": '<p>Test</p>\n<p><img src="bogner-projection-preview.png" alt="The Bogner Projection"></p>' } };
export function rawContent() {
  return "\nTest\n\n![The Bogner Projection](bogner-projection-preview.png)";
}
export function compiledContent() {
  return '<p>Test</p>\n<p><img src="bogner-projection-preview.png" alt="The Bogner Projection"></p>';
}
import {
  render as $$render,
  createAstro as $$createAstro,
  createComponent as $$createComponent,
  maybeRenderHead as $$maybeRenderHead,
  createMetadata as $$createMetadata
} from "/@fs/home/stephan/Repositories/stephanbogner.de/node_modules/astro/dist/runtime/server/index.js";
import "astro:scripts/page-ssr.js";
import * as $$module1 from "@astrojs/markdown-remark/ssr-utils";
import * as $$module2 from "astro:scripts/page-ssr.js";
export const $$metadata = $$createMetadata("/@fs/home/stephan/Repositories/stephanbogner.de/src/pages/projects/18-03_bogner-projection/index.md", { modules: [{ module: $$module1, specifier: "@astrojs/markdown-remark/ssr-utils", assert: {} }, { module: $$module2, specifier: "astro:scripts/page-ssr.js", assert: {} }], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: /* @__PURE__ */ new Set([]), hoisted: [] });
const $$Astro = $$createAstro("/@fs/home/stephan/Repositories/stephanbogner.de/src/pages/projects/18-03_bogner-projection/index.md", "https://eileenmandir.de/", "file:///home/stephan/Repositories/stephanbogner.de/");
const Astro = $$Astro;
const $$Index = $$createComponent(async ($$result, $$props, $$slots) => {
  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
  Astro2.self = $$Index;
  const $$content = { "title": "Test The Bogner Projection", "description": "Understanding map projections by inventing one", "slug": "bogner-projection", "client": "Self initiated", "budget": "None", "cover-video": "bogner-projection-animated.mp4, bogner-projection-animated.webm", "cover-image": "bogner-projection-preview.png", "astro": { "headers": [], "source": "\nTest\n\n![The Bogner Projection](bogner-projection-preview.png)", "html": '<p>Test</p>\n<p><img src="bogner-projection-preview.png" alt="The Bogner Projection"></p>' } };
  return $$render`${$$maybeRenderHead($$result)}<p>Test</p>
<p><img src="bogner-projection-preview.png" alt="The Bogner Projection"></p>`;
});
export default $$Index;

Responsive Image sets generated for Picture at /src/pages/projects/18-03_bogner-projection/bogner-projection-preview.png in 264.76733599975705ms

You can see that $$content contains the Markdown's content which is not the case anymore with current Astro versions. It might be related to the changes related to Markdown that were introduced in version 1.

[ispringle]

This is happening for me as well. I've tried a few things to solve it, but none work.

[kasvith]

Same, happening for me also

[oliverpool]

The solution of @stephanbogner does not seem to work anymore.

Apparently the code representation is quite different from what this plugin expects (note the escaped \"):

                                import { Fragment, jsx as h } from "/project_path/node_modules/astro/dist/jsx-runtime/index.js";
                                import Layout from "../../layouts/default.astro";

                                const html = "<p><img src=\"...\" /></p>";
...

There is no $$render variable as well...

I have no idea what is the reason or a proper fix (vite 4.1.4, astro 2.1.2, astro-imagetools 0.8.1).