Can I override the src prop of an img?

[Taib-Rabah]

Why

I created a data.ts file to store image and video URLs, so I can change everything in a single place.

My Approuch

data.ts

const data = {
  image: {
    vscConfigValidator: "https://...",
    // ...
  },
  video: {
    // ...
  },
};


export default data;

file.mdx

---
title: Hello World
description: Your first document
---

![VS Code Configuration Validator](vscConfigValidator)

Page component

<DocsBody>
  <MDX
    components={{
      ...defaultMdxComponents,
      // See here ↓
      img: ({ src, ...props }) => (
        <ImageZoom
          src={
            src in data.images
              ? data.images[src as keyof typeof data.images]
              : src
          }
          {...props}
        />
      ),
    }}
  />
</DocsBody>

Result

[fuma-nama]

In source.config.ts, define a global config and set mdxOptions.remarkImageOptions to false to disable build-time image optimisation