How to load images by URL?

[adaboese]

I do not understand documentation section about image bundling. I do not want to bundle images – I want them to load exactly the same way that they do in Remix.

In Remix, I can already get image URLs like this:

import originalityAiResultAfterRewrite from './originality-ai-result-after-rewrite.png';

// `originalityAiResultAfterRewrite` is image URL

I found one way... but it is very cumbersome:

import originalityAiResultAfterRewrite from './originality-ai-result-after-rewrite.png';
import originalityAiResultBeforeRewrite from './originality-ai-result-before-rewrite.png';

const { code, frontmatter } = await bundleMDX({
    files: {
      originalityAiResultAfterRewrite: `export default '${originalityAiResultAfterRewrite}'`,
      originalityAiResultBeforeRewrite: `export default '${originalityAiResultBeforeRewrite}'`,
    },
    source,
});

and then inside mdx I need to do again:

import originalityAiResultBeforeRewrite from './originality-ai-result-before-rewrite.png';

![Hello](${originalityAiResultAfterRewrite})

Is there a better way?