How can I override the `img`

[rootkowsky]

I would like to use the default behavior of handling images by nextra in .mdx files.

But how can I override the img component to i.e. wrap it by <figure> and add <figcaption> inside?

The default approach does not work (only for img component):

import { DocsThemeConfig } from 'nextra-theme-docs'

const themeConfig: DocsThemeConfig = {
  components: {
    img: () => {
      return 'custom img'  // ❌ this does not work
    }
  }
}

export default themeConfig;

[dimaMachina]

if you talk about overriding <img ... /> html elements from md/mdx use approach from https://nextra.site/docs/guide/advanced/table#changing-default-behaviour