Add support for importing images

[henniaufmrenni]

One nice feat about mdx-bundler is that it allows for image bundling through import statements.
https://github.com/kentcdodds/mdx-bundler#image-bundling
Implementing this would be especially helpful for the very limited next/image, because there wouldn't be the need for width/size specification and it would provide a blur hash automatically.

[schickling]

Great point! Will investigate. Would you expect the images become part of the deployment or be uploaded somewhere else?

[henniaufmrenni]

I personally thought for my use case abound bundling it with the MDX so it becomes part of the deployment.

[schickling]

I've done a quick investigation and I think there is a really great opportunity for Contentlayer to make working with images as part of your content much easier - especially in Next.js applications where for the <Image /> component you need to provide the size dimensions.

Based on the provided image-related instructions of mdx-bundler I've done a quick experiment and got things to work using the dataurl "image embedding". For most cases this is probably not a great solution but it's already something that could be done in the meanwhile by users waiting for this feature.

I'm really excited about diving into this feature but it's just a matter about finding enough time for it as it's quite a serious time investment. 👀

[EthanStandel]

For my site, I have several products each with an image set. So I need access to a list for an image-carousel. I don't feel like my use-case is an edge-case.

I would really like to see the ability to just get a manifest for all images in my /public directory. So like import { allImages } from '.contentlayer/data'; would give you just the paths for images from /public. Right now, I'm just using a prebuild script to generate imageManifest.json files. This works but feels like the kind of hackery that contentlayer could help me get out of doing for an individual project.

[browniefed]

I ended up using a computed field, parsing the doc, copying to public, and then having a map. Then wrapped my rendering document in a context provider, Then for my img component replace it with a custom image component that utilizes next/image and the size analyzed at build time.

{ './local.jpg': { size: {width:100,height:100}, url: '/location-in-public-[hash].jpg } }

I once upon a time used https://github.com/sergioramos/remark-copy-linked-files but usually in running stuff via mdx-bundler the VFile doesn't have a file path.

Ideally if we doing a content layer from local files, then the cwd would be set correctly and theoretically contentlayer could avoid in some cases complex image management and leave it to remark plugins. But just a thought

[sisp]

An additional thought on this topic:

I'd like to be able to import SVGs in a Next.js app via Contentlayer and embed them instead of rendering an <img/> with a data URL in order to apply styles (mainly fill color) to the SVGs. I've been thinking whether it's possible to leverage SVGR to convert an SVG to a React component in Contentlayer. Perhaps a field definition could look like this:

{
 // ...
  fields: {
    // ...
    icon: { type: "svg", required: true },
  }
}

and the data received in the Next.js app would be a React component of the SVG that can be rendered like any other component, the only difference is that it isn't imported via import ... from ... but provided by Contentlayer.

What do you think?

[schickling]

Those are all super interesting ideas. I'm hoping to get to working this feature in the near future but most likely still a few months away.