Loading images with <img width="300" height="300" src=""/>

[exztz1]

Hi

I imported a bunch of Joplin notes. The regular images (from the resources folder) load fine in the notes however some Joplin notes seem to have images loaded with <img width="300" height="300" src="../_resources/image.png"/> type of line.

Is there a way to get these images loaded properly so that my pages are not filled with giant broken rectangles and missing images.

[Obsidandnancy]

This might help…

Importing from Evernote via Joplin - confused about ''resources'

Thanks. I can see what the issue is now, the links begin with …/ which means the next level up. But my project folders are in a subfolder of the folder ‘Projects’. I can manually change the links to start …/…/ or take up the suggestion of using Notepad ++ to change them in bulk. Thanks for helping with that. For now I want to experiment with different ways of importing into Joplin following the folder structure there that I want to have in Obsidian. That might mean the export will bring…

[exztz1]

I do not think that my issue is directly related to the resources folder, since regular images load fine. It is this certain type of image syntax that are in the notes that is causing the issue.

[Obsidandnancy]

Alternative:

Currently, Obsidian has horrible or non-existent Find and Replace. But since these are just text files in an OS folder, you can use something like Notepad++ to search and replace across multiple files within your vault or even a single folder in the vault.

All you really need to do is replace “<img width=“300” height=“300” src=”…/_resources/" with “![[”, and replace “”/>" with “]]”. Assuming the images had all the same size parameters.

Obsidian uses ![[image_name.extension]] for the internal link to images with that name in your designated attachment folder.

That second replacement could be tricky because you might have "/> in other files and you don’t want to screw those up. I might suggest you practice with the multi file replacement in a single folder first and back up your vault before you do any of this.

Idea, for the second replacement, assuming your images are png files for example, you could replace “.png”/>" with “.png]]” to avoid accidentally matching other patterns of "/>.

Notepad++ is simple, but a wrong key and you could really mess up your vault.

I tested it on your exact string in two of my notes and it worked fine.

I didn’t test if the link would connect to images after it was created. I think you should test that first.

I closed Obsidian before I did the Notepad replacement.

In Notepad++,
Search>
Find in Files>
Find what
Replace with
Directory

Back up first.

[JayKim]

Like Obsidandnancy has already mentioned you can embed images like this
![[imagename.png]]

If you want to resize them you can do it like this: ![[imagename.png|300x300]]

To have the image scale according to its aspect ratio, omit the height
![[imagename.png|300]]

[exztz1]

@Obsidandnancy

All you really need to do is replace “<img width=“300” height=“300” src=”…/_resources/" with “![[”, and replace “”/>" with “]]”. Assuming the images had all the same size parameters.

Thanks for the recommendation however this won’t work because there are probably hundreds of files with these and they all have different resolutions.

I did not type these myself, I am guessing that these entries were created by the web clipper.

[Obsidandnancy]

Only other thing I can think of is to go back to Joplin and export to a different note system first that plays nicely with Obsidian import. The old middleman trick.

[exztz1]

What format would that be?

[Obsidandnancy]

No idea, you would have to research which other note apps import images to Obsidian without parameters, or find a way to export from Joplin without parameters.

Did think of a way you might still use the Notepad idea, not sure if there is a way to use “mid string wildcard” to allow replacement of any size parameters but still have the known beginning and end of the string. Replace “abc %wildcard% xyz” with “”.