Mdx: inline image tags not rendered

[geddski]

images inside of markdown text is rendered as text instead of as an image.

The terrain <img src="/img/terrains/grass.jpg" width="24" style={{margin: "0 !important", display: "inline-block !important"}} alt="css grid item" /> items we'll use are stacked to the left of the shuttle to show their order in the DOM.

should be rendered as:

but instead is just text:

[geddski]

As a workaround for anyone else who needs this: just use a span instead of an img and then style that span with a background image.

Closing this issue since there's a workaround.

[timneutkens]

Seems like something that should work 🤔

[silvenon]

Yeah, inline JSX doesn't seem to work. The original example doesn't work because style={{ }} is not valid HTML (it's JSX), so remark interprets the whole element as a string. Using a string instead of an object for style will work:

style="margin: 0 !important; display: inline-block !important"

I would also like the JSX form to work, though.

[jamesknelson]

This is also not being parsed properly. There's a workaround where you can import the image at the top of the file and add that, but it's not ideal.

<a href={require('./async-cheatsheet.png')}>
<img alt="Asynchronous JavaScript Cheatsheet" src={require('./async-cheatsheet.png')} />
</a>

Any idea how I'd go about fixing this? I'm moving all my markdown from MDXC to MDX, and this is the one thing that seems not to work.

[silvenon]

I'm not sure what causes this, but a workaround might be to create a custom component that's simply an alias for the <a> element:

// Link.js
export default 'a'

import Link from './Link'

<Link href={require('./async-cheatsheet.png')}>
<img alt="Asynchronous JavaScript Cheatsheet" src={require('./async-cheatsheet.png')} />
</Link>

The parser treats <a> elements differently (for example <div> works) probably because links are special in Markdown, so it can't parse syntax which isn't valid HTML.

[jamesknelson]

Neat, that works. Thanks!

[johno]

The image tag isn't working because of the curly braces. This will be fixed when remark-mdx is finalized and then used in core. You can follow along with #196 to track progress. Thanks for opening up an issue!