React-markdown: transformLinkUri not working with images link

[CedricDumont]

Hello, I've testet the component and wanted to change link of images in markdown like

![insert images](../images/myImage.png)

changing the '../images/myImage.png' to 'http://someserverofMine.com/images/myImage.png' but it's not passing through my function if i use '!['

Without the '!' it's passing through my function

[insert images](../images/myImage.png)

bu then it's a link, not an image that is displayed but a link.

for info here is the usage of the component

<ReactMarkdown transformLinkUri={this.myTransformLinkUri} source={this.state.content}/>

do you have a workarround ?

[akheron]

I opened a pull request rexxars/commonmark-react-renderer#19 which addresses this issue in the commonmark-react-renderer side.

[rexxars]

Sorry for not responding to this earlier. @akheron solved this with transformImageUri - it's now out in 2.4.0.

[damianobarbati]

@rexxars I honestly didn't understand: is the following supposed to render my image in the markdown? Because I get an href link with "image" as content. How do I display an image?

Input:

[image](https://octodex.github.com/images/dojocat.jpg) 

Code:

//instance variable
img = uri => <img src={uri} />;
//in render
<Markdown className={classes.markdown} source={content} plugins={[breaks]} transformImageUri={this.img} />

Renders:

<a href="https://octodex.github.com/images/dojocat.jpg">image</a>

[rexxars]

The title for this issue is a bit misleading. Images in markdown should be prefixed with a !.
(eg. ![image](https://octodex.github.com/images/dojocat.jpg))

If you for some strange reason you want to change the way markdown works, you could use a custom renderer for the link type (though this seems like a really bad idea to me):

const ImageOrLink = props => {
  if (props.href.match(/\.(jpe?g|png|gif)$/)) {
    return <img src={props.href} />
  }

  return <a href={props.href}>{props.children}</a>
}

<Markdown source={content} renderers={{link: ImageOrLink}} />

[rexxars]

The transformImageUri prop transforms the actual URI for the image, so if your markdown is ![image](dojocat.jpg), you could for instance define a function to prefix it with a default absolute path:

const transformImageUri = input =>
  /^https?:/.test(input)
    ? input
    : `https://octodex.github.com/images/${input}`

[damianobarbati]

Thanks @rexxars, it works nice and clean: just a syntax error on my side then :)