Are image elements supported?

[bj00rn]

I use this plugin with react-markdown

I can't seem to get attributes for images, other elements such as <em/> work fine
Are images supported?

Img is not listed in supported.elements but the readme includes the following example:

![alt](img){attrs} / ![alt](img){ height=50 }

[arobase-che]

I use this plugin with [react-markdown](https://github.com/rexxars/react-markdown) I can't seem to get attributes for images, other elements such as `<em/>` work fine Are images supported?

Good new, images are supported.

Img is not listed in supported.elements but the readme includes the following example:

Img is not listed in supported.elements for technical reasons if I remember. link and img are the same thing from the point of view of remark. I think that this is a point of confusion and should be clarified ASAP in the documentation. What is your problem with images ? ^^ You can extend images with the option : `{extend: {image: ['your-attr']}}`. Standard attributes are supported by default, so is `height`.

[bj00rn]

@arobase-che thanks for quick reply! 🌹

my problem is that the attributes does not seem to be picked up by my custom renderer function in react-markdown for images. For other elements such as em it works fine.

Issue might very well be specific to my use-case (react-markdown) though.

Below does not work:

![alt](img){ style="color:red" }

Below works fine:

Npm stand for *node*{style="color:red"} packet manager.

[arobase-che]

@arobase-che thanks for quick reply! 🌹

Your are welcome. 💚

Issue might very well be specific to my use-case (react-markdown) though. Do you have a snippet you could share to conversion from cmd-line or node?

It may be. :s remark-attr is intent to be used with rehype. Can you share a minimal _non-_working example ? ^^ What you have already shared seems to work. [Here](https://runkit.com/embed/xvx12zvlwmu7) is my test.

Below works fine: ``` Npm stand for *node*{style="color:red"} packet manager. ```

Cool ! :D Giving hope that it's just a little mistake that can be quickly fixed. Edit: Sry email replies do not support Markdown and I wasn't aware of that. 😞

[mrm007]

my problem is that the attributes does not seem to be picked up by my custom renderer function in react-markdown for images. For other elements such as em it works fine.

That's unfortunate. react-markdown won't pass the attributes down to your render function (see here). If you set a breakpoint on that line (assuming you have everything else configured correctly) you'll find node.data.hProperties populated by this plugin, but the information doesn't make it to your image renderer.

[arobase-che]

Thank you @mrm007 !

I understand the problem but can do anything from my side. I don't understand why they don't pass hProperties to react.

[bj00rn]

@mrm007 you sir, are correct! thank you for the pointers. I´ve opened an issue to pass hProperties to renderers.

@arobase-che upon further investigation I realized that this behavior applies to all element types. like @mrm007 pointed out it's an issue with react-markdown.

Thanks again guys 🎁

[bj00rn]

remarkjs/react-markdown#384

[arobase-che]

@arobase-che upon further investigation I realized that this behavior applies to all element types. like @mrm007 pointed out it's an issue with react-markdown.

Sorry :/ I will follow the issue. I wish I can add your use case to the tests.