Handling markdown images

Development
1

for an image rendering the code is

![GitHub Logo](/images/logo.png)

but with Joplin, the code is

![GitHub Logo](:/resource_id)

so except Joplin itself, we are not able to render the image ourselves ?

I ask that for joplin-web I wrote.
The preview of the rendering markdown never show the resources image.
Do I have to tweak the JS of the markdown ‘engine’ that transform markdown to html ?

2

I think you have two options:

  1. Hook into the Markdown rendering of your app, and when you hit an image, convert the :/resource_id to a link to the actual image.

  2. In Note.serializeForEdit, which is used when opening a note in an external editor, the resource IDs are converted to the full path to the image. This is so that the images display in eg Typora. Maybe you can also somehow use this feature (thought maybe some tweak is needed to the code base).

3

Ok, I will try that.
So, when submitting a note, I will need to check if there is an existing "markdown image pattern" (this one ![...](...) ) and for each of them, trigger a call on the endpoint API "/resources". I hope the return result is the resource ID when "POST"ing , and then replace the image path by the resource_id.

To be continued :wink:

4

I could do that trick as posted here Joplin Web - a webapp for our joplin editor

5

how do I guess which extension of image is used by the resource_id ?

eg

<img width="46" height="46" src=":/80f79c913113497eb56d1b686119f506"/>

how to I know if it"s png jpeg gif ?

6

it’s rude … I have to query the API for each resource to find its extension, haven’t i?

7

Yes that’s right, I don’t think there’s a way around it. Or perhaps you could try to display the image as is and let the browser auto detect the format but not sure it would work.

8

I am not even sure, if that’s the right approach. Just because something has the extension .jpg, doesn’t mean it IS a jpg file. I’m only mentioning this, because I’ve been bitten by such an assumption before.
Not to mention it could be a security risk.

1 Like
9

Could it be a bug in the webclipper that does not “translate”

<img height="XX" width="XX" src="image.png"/>

As markdown

![image](image.png)

?
Because actually once webclipper get a page I got

<img height="XX" width="XX" src="hash"/>
10

I’m not sure what you mean @foxmask. Is it about the web clipper or about joplin-web?

11

in joplin-web, notes that are displayed, sometimes, come from webclipper.

12

I see what you mean - when the clipper imports an image and knows the dimensions, it adds it using an HTML IMG tag. This is so that width and height can be specified.

So indeed you need to take this into account - in general Joplin supports resource IDs in Markdown image tags, and in HTML IMG tags. As I mentioned you can find most of the code to detect resource URLs there: https://github.com/laurent22/joplin/blob/c6842a85918e742356ae4b78d8227bc07025459b/ReactNativeClient/lib/urlUtils.js#L42

13

i understand it’s because of the height and width properties which are not managed with markdown ![]()

i well understood and it’s too bad that we lost the extension of the resources in that case.

i don’t see another way to deal with that, except by triggering a request to /resources/:ressource_id to get the extension then go back inside the body of the note and finally display it.

14

Is this issue solved? I am facing the same issue - the markdown uploaded have broken images because they refer files locally.