Dynamically importing local images for use in next/image

[schardev]

So let's say I have a bunch of MDX files that I want to statically render that contains local images. I want them to properly optimize first using next/image, so what are my options?

In the official docs it says:

Warning: Dynamic await import() or require() are not supported. The import must be static so it can be analyzed at build time.

except ... I can still use it and next/image works (almost) as expected. See for example the below (overly simplified) code snippet:

---
title: Test Mdx
---

![this is an internal image](/image.jpg)

// MDXContent.jsx
import Image from "next/image";
import { useMDXComponent } from "next-contentlayer/hooks";

const mdxComponents = {
  img: async ({ src, alt = "", ...restProps }) => {
      const img = await import(`../../public${src}`)
      return (
        <figure>
          <Image
            src={img}
            alt={alt}
            width={100}
            height={100}
            sizes="(min-width: 1024px) 80vw, 100vw"
            {...restProps}
          />
          {alt && <figcaption>{alt}</figcaption>}
        </figure>
      );
    };
};

const MDXContent = ({ code }) => {
  const Content = useMDXComponent(code); // let's assume we pass the above mdx's raw code here
  return <Content components={mdxComponents} />;
};

This works and next/image properly generates srcset from the local image (except for detecting/setting the width and height automatically). Then why does it says in the docs that dynamic imports are not supported? Are they not supported in SSR only but works totally fine when used with ISR?

Currently it doesn't detect width / height and I can only think of reading the image file using node:fs and setting width / height based on the image buffer using any library. Let me know if there's a better approach for this.

[schardev]

\cc @leerob @delbaoliveira (apologies for random tagging, but because you guys maintain the docs maybe you can clarify the docs part of it).

[ibqn]

@schardev Hi, have you found an answer? I would like to know how to import local images based on path from frontmatter as well.

[schardev]

I ended up using a custom image component for setting width/height based on the image's buffer. (Should only be used for static content though).

[arkrosclou]

@ibqn
try to use @unpic/react over next/image, it has several additional features and also solves the problem with local imports and width/height determination, the only problem is that images still need to be stored in /public but it's still a good decision

[Luchanso]

I try some difference things, and found another solution (not ideal):

In mdx:

![test](/image.png)

After you need to put image image.png in public folder public/image.png

Mdx component:

    img: (props) => {
      return (
        // eslint-disable-next-line jsx-a11y/alt-text
        <Image
          sizes="100vw"
          style={{ width: "100%", height: "auto" }}
          width={0}
          height={0}
          className="my-12"
          {...(props as ImageProps)}
        />
      );
    },

But yes, it's not helping with width & height

[Luchanso]

Another one solution write custom component like

Img: (props) => {
      return (
        // eslint-disable-next-line jsx-a11y/alt-text
        <Image
          className="my-12"
          {...(props as ImageProps)}
        />
      );
}

and using it in mdx: <Img width={123} height={321} src="/image.png" />

[sgarciagallego]

I found something that seems to do a bit better with MDX images, and adds a layer blur on load, which is beneficial for my scenario.

import styles from './styles.module.css';
import { ComponentPropsWithoutRef } from 'react';
import Image, { ImageProps } from 'next/image';
import path from 'path';
import sharp from 'sharp';

interface ImgProps extends ComponentPropsWithoutRef<'img'> {
  src: string;
}

export default async function Img(props: ImgProps) {
  const imagePath = path.join(process.cwd(), 'public', props.src);
  const sharpImage = sharp(imagePath);

  const placeholder = await sharpImage.resize(10).toBuffer();
  const base64 = placeholder.toString('base64');
  const blurDataURL = `data:image/png;base64,${base64}`;

  return (
    <Image 
      sizes='100%'
      quality={100}
      placeholder='blur'
      blurDataURL={blurDataURL}
      width={2048}
      height={1365}
      className={styles.properties}
      {...(props as ImageProps)}
    />
  );
}

Change to your liking, but this is what my component looks like, and works well on MDX renders:

![Image placeholder](/path/to/img.jpg)

Obviously the width and height are still an issue, as the <Image> Next.js component doesn't work without it.

[davidreis97]

I made this component to solve precisely this issue. It's based on the one that Rauch himself uses on his blog page. Make sure that your VERCEL_PROJECT_PRODUCTION_URL makes sense and is publicly available.

import NextImage from 'next/image';
import sizeOf from "image-size";

interface ImageProps {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
}

export const Image: React.FC<ImageProps> = async ({ src, alt, width, height }) => {
  const isExternal = src.startsWith('http');

  if (width == null || height == null) {
    const absoluteSrc = isExternal ? src : getAbsolutePath(src)
    let imageBuffer = Buffer.from(await fetch(absoluteSrc).then(res => res.arrayBuffer()));
    
    const size = sizeOf(imageBuffer!);
    width = size.width;
    height = size.height;
  }

  return <NextImage alt={alt ?? ""} src={src} width={width} height={height} />
};

export function getAbsolutePath(relativePath: string) {
  const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL && `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` || 'http://localhost:3000';

  const cleanRelativePath = relativePath.startsWith('/') ? relativePath.slice(1) : relativePath;

  return `${baseUrl}/${cleanRelativePath}`;
}