Any way to add images from the same folder as posts?

[deadcoder0904]

I just stumbled upon your repo while searching Github.

There are not many repo's using images & I want to make a blog with next-mdx-remote with images in the same folder as posts.

So my question is, is there any way to have images in the same folder as posts & reference it from there because I like co-location like the Tailwind Blog?

[osiux]

Hey @deadcoder0904, that's a good question, I want to try to do something like that. I have this idea that probably we can import the images the same way they do in that tailwind post and use <Img /> component from next-optimized-images#canary.

Then add that Img component on the component list used to hydrate a post.

The idea would be to have it like this in the mdx file:

import image1 from './image1.jpg'
import image2 from './image2.jpg'
---
title: '#100DaysOfGatsby'
date: 2020-01-04T10:00:17-0600
tags: 
    - gatsbyjs
---

Some content here.

<Img src={image1} sizes={[500]} />
<Img src={image2} sizes={[500]} />

Thats the main idea haha need to test if it works that way.

[osiux]

I just found remark-embed-images, seems like this would work too adding is as a remark plugin here. I'm gonna see if it's possible to combine with Img component to optimize images while embedding them.

[deadcoder0904]

@osiux Your 1st comment is what I thought would work too but it doesn't work like that.

I made a minimal repo to see if it works & it doesn't → https://github.com/deadcoder0904/blog-mdx-remote

Check the code here where I used MDX Provider → https://github.com/deadcoder0904/blog-mdx-remote/blob/master/pages/_app.js#L7-L13

I also tried doing the way you mentioned in the 1st comment using hydrate → https://github.com/deadcoder0904/blog-mdx-remote/blob/master/pages/blog/%5Bslug%5D.js#L9-L12

And the author of next-mdx-remote said that it won't work as it doesn't pass through webpack at all & it treats markdown as data but I did see a blog on Github successfully doing that few days ago so asked → hashicorp/next-mdx-remote#29 (comment)

Although do let me know if your 2nd comment is working as expected because I'd love to use next-mdx-remote but in a way that keeps my images co-located with my blog post :)

[osiux]

@deadcoder0904 Makes sense, then I think my idea to use the remark plugin with another component might not work. For now I think the solution would be to use that plugin as is, but it would not optimize images, that needs to be done manually. What the plugin does is read the file from the markdown, like this:

![A PNG file](./foo.png)

Reads the content and embeds the base64 string. I think thit is the closest you are gonna get to have the images in the same folder, but i'll try my theory tomorrow haha

[deadcoder0904]

@osiux cool, I'll wait till 2mrrw then otherwise move on to some other solution as the Tailwind guys did :)

Reads the content and embeds the base64 string

when you say this, it's not really possible for big images like 1 MB or more....as that would result in HTML content too big, right?

[dpyzo0o]

@deadcoder0904 Hi, have you managed to import images from the same folder using next-mdx-remote? Currently I'm following what tailwindcss blog did here and it works. I want to switch to next-mdx-remote but find that you cannot just import images in mdx files since they don't go through webpack.

[deadcoder0904]

Hey @dpyzo0o, next-mdx-remote won't work with importing images from the same folder for the reason you stated.

I tried Tailwind's approach → https://github.com/deadcoder0904/blog-mdx-next/tree/tailwind but got stuck because my blog is a little different.

I want it to have /blog & /tutorial & that's where I face this error which I have explained in detail on StackOverflow → https://stackoverflow.com/questions/64246732/create-loader-that-maps-url-path-to-a-component-using-webpack-in-next-js

Then I just tried Egghead's approach which is using react-markdown which works but I am unable to use meta field from .mdx & importing images from the same folder. I have published the latest commit here → https://github.com/deadcoder0904/blog-mdx-next/

Lmk if you have any ideas?

[dpyzo0o]

@deadcoder0904 I think you might try webpack's include/exclude conditions to apply rules to certain folders. See here for more details.

[deadcoder0904]

Holy shit it actually worked. Thank you so much 🙌

Here's the commit → deadcoder0904/blog-mdx-next@84ad004