Working with static assets (images) in v3

[HoverBaum]

Before I used my images as:

![](images/something.png)

<img src="images/something.png" />

While keeping a top level images folder in my project and that worked fine. With the move to v3 this stopped working. I dug a bit into Gatsby and tried moving my images folder into a static folder, but that did not work.

How can we use static resources, such as images? Is there still a folder being served?

[alpinegizmo]

I'm stuck on this too. I've got about 100 SVGs in the static folder, which works fine with @mdx-deck/gatsby-theme (and v2), but it's not working with v3 and gatsby-theme-mdx-deck.

[jxnblk]

@HoverBaum looking into this now

@alpinegizmo When using gatsby-theme-mdx-deck, the local static directory in your Gatsby site should still work. Do you have a link to a reproduction?

[jxnblk]

I'll have to dig into this later, but tested using webpack to import an image with the CLI and that can be used as a workaround for now. The other advantage to using webpack is that it will throw an error when an image is missing, rather than causing a 404 in the browser.

import ace from './images/ace.png'

<img src={ace} />

[alpinegizmo]

@jxnblk https://github.com/alpinegizmo/mdx-deck-v3-static

[alpinegizmo]

The webpack workaround appears to have the drawback that I have to restart the dev server every time I add an image. That's unacceptable; any way to make this dynamic?

[jxnblk]

@alpinegizmo hmm, the restarting sounds like it might be a Gatsby issue, but I'll look into it

[HoverBaum]

Can confirm that the import way works but requires a reload of the dev server every time you add an image 😞

I published a minimal reproduction repo: https://github.com/HoverBaum/bug-mdx-deck-401

[tlenclos]

Also a big breaking change for me that prevents me from updating.

[karlhorky]

For me, putting images in a folder next to your .mdx file called static and referencing them with a relative path as below works - although not on the first time that you load the dev server 🤪 (refresh after loading the first time, and everything works)

<img src="./backlog-grooming" />

Because this uses remark-images under the hood, you can also refer to them like this:

./backlog-grooming

...although this has the side effect of making it into a linked image, which is not always desirable in slides.

---

That said, I am doing a bit of patching on mdx-deck to achieve proper relative paths, so I'm not sure if this is causing some of the "compatibility": https://github.com/jxnblk/mdx-deck/issues/535#issuecomment-863141174