Making the change of image file used in custom component detectable by Docusaurus

[allenscha]

Hi,

We're trying to create our own component for images, which includes features such as caption, positioning, or resizing.

If we use code such as the following:

import useBaseUrl from '@docusaurus/useBaseUrl';

export default function CustomImg({ src, ...some props }) {
  return (
    <figure>
      <img src={useBaseUrl(src)} {use_props}>
      <figcaption {use_props}>
    </figure>
  );
}

The change of file at src does not seem to be detected by the live reload feature of Docusaurus.

Is there a way to make such changes detectable by Docusaurus? (Or is it only possible when we use the plain Markdown image syntax?)

[slorber]

Live reload should work. Please create a small repro showing the problem in pratice.

[allenscha]

I forgot to mention that the custom component (similar to the one shown above) is used inside a partial (MDX) file included in a parent document file. Would that affect the live reload behavior somehow?

I'll test to see if it makes any difference when the custom component is used in a plain Markdown.

[slorber]

No it shouldn't make any difference, Webpack see the whole module graph including imports