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

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 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]

https://github.com/rexxars/react-markdown/issues/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.