How to use local images

Hello

In the sample I see how to use the Image component but how about images I have in my local repository?

• deck.mdx
• images/hero.jpg

This does not work

<Image
  src='./images/hero.jpg'
  style={{
    width: '100vw',
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>

## Background Image

</Image>

Variations I tried for src are

/images/hero.jpg
images/hero.jpg

All don’t show my image.

Many thanks.

[therealparmesh]

Does this work for y’all?

// Photo ⬇️

import i from './image.jpg';

<img src={i} />

// Video ⬇️

import v from './video.mp4';

<video controls>
  <source src={v} />
</video>

// Audio ⬇️

import a from './audio.mp3';

<audio controls>
  <source src={a} />
</audio>

// Object ⬇️

import o from './object.pdf';

<object data={o} />

[karlito40]

I had the same question. As a workaround i serve all my static files from another local server.

So basically you just do:

npm i concurrently --save-dev

and next replace your package.json scripts section with the following:

"scripts": {
    "start": "concurrently \"npm:mdx\" \"npm:static\"",
    "mdx": "mdx-deck deck.mdx",
    "static": "cd static && python -m SimpleHTTPServer 8081"
  }

You will now be able to access your static files from http://localhost:8081 as shown below:

---

<Image src="http://localhost:8081/word-art.png"/>

---