Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Working with static assets (images) in v3 #401

Open
HoverBaum opened this issue Jul 18, 2019 · 9 comments
Open

Working with static assets (images) in v3 #401

HoverBaum opened this issue Jul 18, 2019 · 9 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@HoverBaum
Copy link
Contributor

HoverBaum commented Jul 18, 2019

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
Copy link

alpinegizmo commented Jul 19, 2019

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
Copy link
Owner

jxnblk commented Jul 19, 2019

@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
Copy link
Owner

jxnblk commented Jul 19, 2019

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} />

@jxnblk jxnblk added bug Something isn't working help wanted Extra attention is needed labels Jul 19, 2019
@alpinegizmo
Copy link

alpinegizmo commented Jul 19, 2019

@alpinegizmo
Copy link

alpinegizmo commented Jul 19, 2019

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
Copy link
Owner

jxnblk commented Jul 20, 2019

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

@HoverBaum
Copy link
Contributor Author

HoverBaum commented Aug 7, 2019

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

This comment has been minimized.

@karlhorky
Copy link
Contributor

karlhorky commented Jun 30, 2021

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": #535 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

5 participants