Using plugin-ideal-image for Markdown file? Is a swizzle on MDXComponents/Img possible?

[ygini]

Hello,

Our KB contains a lot of photo and is fully written in markdown as we try to keep things easy for all the contributor.

So far the general UX is good for both contributors as well as readers except on one thing: the images are imported from the markdown as full resolution. And we would like to avoid manual management of image sizes.

We tried to swizzle the MDXComponents/Img function to replace it by the following code:

import React from 'react';
import Image from '@theme/IdealImage';

export default function MDXImg(props) {
  return (
    // eslint-disable-next-line jsx-a11y/alt-text
    <Image
      img={require(props.src)}
      alt={props.alt}
    />
  );
}

Which does not works because the props.src at that stage is already a /assets/images/… path.

Since I'm new to both Docusaurus as well as Typescript / Webpack and all those things (I'm coming from native iOS and macOS development in Objective-C and Swift) I'm asking for help and general guidance to achieve my goal: having markdown images working with plugin-ideal-image.

[slorber]

Unfortunately, we do not support that feature.

However, you can implement it yourself, through a Remark plugin.

We should provide such a Remark plugin in Docusaurus, but for now, it has not been implemented

[ygini]

OK, thanks, I will look in that direction.