nextcloud / nextcloud/notes

Rich editor fails to load manually added embedded images

Open
#1,171 6 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

1. to develop bug feature: attachments
Dominant language
JavaScript
Stars
738
Forks
162
Avg merge
6h 2m
Merged PRs (30d)
35

Description

Using the rich text editor on the Notes web interface displays "Failed to load" for (seemingly) any embedded image links that aren't created by the rich text editor.

I have been migrating users from Evernote to Nextcloud Notes. The migration tool by default stores media in a _resources/{note-title}.resources/ directory and uses the relative path for the image source in the markdown. At first I thought that something was breaking in the rich display when any media url starts with an underscore, however after further testing I can't get any embedded image link to work unless it's created by the rich text editor itself. Is something being written to the database to enable the display?

To verify I don't just have a syntax error, I've been validating that it works using a local markdown viewer.

Steps to reproduce

  1. Create note with an embedded image eg:
![image_file](_resources/note-title.resources/image_file.png)
  1. The rich editor will display a generic image icon and message: "Failed to load _resources/note-title.resources/image_file.png"
  2. I even tried changing an existing embedded image that was saved to the standard .attachments.xxxxxx directory. Renaming the directory to replace the first period with an underscore, and doing the same in the note markdown, results in the same issue of the image not displaying.
  3. Also tried prepending the uri with ./ to see if it was only the start of the string that caused the issue. But same result.
  4. I then tried making them fit the subdirectory naming that is generated when you use the rich editor to embed an image: .attachments.xxxxxx but again same result.
  5. I then tried a completely innocuous directory name note-title
  6. and finally no subdirectory
Expected behaviour

Relative image paths used in embedded image markdown should render in the rich text editor

Actual behaviour

None of these embedded image markdown links seem to work:

![image_file](_resources/note-title.resources/image_file.png)

or with the underscore char escaped:
![image_file](\_resources/note-title.resources/image_file.png)

or creating a notes "standard" subdirectory:
![image_file](.attachments.xxxxxx/note-title.resources/image_file.png)

no sub-directory at all:
![image_file](image_file.png)

Server

Please complete the following information.

  • Notes app version: 4.8.1
  • Nextcloud version: 27.1.3.2

Thanks

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the failure in the Notes web interface with the relative image paths listed in the issue, then compare them with paths created by the rich text editor. Trace how those markdown image sources are loaded and verify that relative images render for the listed directory and no-directory cases without breaking existing attachments.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.