vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.51k stars 26.81k forks source link

use next/image in next-mdx-remote/rsc #54560

Open dwissaaj opened 1 year ago

dwissaaj commented 1 year ago

Verify canary release

Provide environment information

Windows 10
Next 13.4.4

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/dwissaaj/kisetsu.tech/tree/markdown

To Reproduce

In docs we can see there is a warning for this feature . When I try use it with custom component it throw

 error Error: Failed to parse src "undefined" on `next/image`, if using relative image it must start with a leading slash "/" 
or be an absolute URL (http:// or https://)

    at Array.map (<anonymous>)

I believe it's due to markdown where url ![inside the markdown](https://example-image.com) cannot parsed by MDX. Is there any possible solution about this? There is a few tried to solve this for example

# mdx-remote.js
import { MDXRemote } from 'next-mdx-remote/rsc'
import Image from "next/image";

const components = {
    img: () => (
        <Image src={src} alt={alt} width={400} height={400} />
    ),
}

export function CustomMDX(props) {
    return (
        <MDXRemote
            {...props}
            components={{ ...components, ...(props.components || {}) }}
        />
    )
}

# Or other custom component
import Image from "next/image";

export function useMDXComponents(components) {
    return {
        img: () => <Image src={`${img.src}`} alt={`${img.alt}`} width={400} height={400} />,
        ...components
    }
    // Allows customizing built-in components, e.g. to add styling.
    // return {
    //   h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
    //   ...components,
    // }

}

# page.tsx
 <CustomMDX source={data?.post?.content}   />

Describe the Bug

next/image cannot be render by next-mdx-remote/rsc

Expected Behavior

html tag img rendered using next/image

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

mengxi-ream commented 10 months ago

same issue

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!