Inline images show as data:image/png;base64

Added by Justin A about 6 years ago

Hi everyone,

I've been plagued by this for as long as I've been using Redmine. My inline images show as <img src="data:image/png;base64... (or just data:image/png;base64...)

When I paste into a text-area box the image displays fine, but when I save the display shows the encoded image as text -- like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcMAAAMKCAIAAAB2nLjcAAAgAElEQVR4nOydd1wU197/uc/9Pc8tufcmuTe5idHcRI0aNQY1anpii5prLwmWEI1YSOxiRdS1IagYFUQTKyJKEVhYqvRepMrSy9Jh6VIERZ3fH2d39szMmS3sUha+n9fnpcvsmTNnZmfe+z11DcRp8WAwGAzusqdOnWogTounQCAQCNQlCQQCBUl7HepgMBisjwaSgsFgsLYmkPSv7/2ijV8asemlEZv+NnLT30Zu/tuozX8ftfnv72/5x/tb/vH+lpdHb3159NaXx2x7Zcy2V8Zue3Xs9lc/2P7qB9v/+cGOf47b8a9xO/714c7XPtz5mqHZa4Zmr483e338rn+P3...

When I go back into the editor the input displays as an image again.

I've tried using the default textile editor, CKeditor, removing plugins, and I'm just at a loss as to what to try next.

Here's my environment: (I first setup Redmine the hard way, by starting with a newly installed Ubuntu host, but I couldn't get all the dependencies to work, so I went to CentOS, then Fedora, and about 10 Linux installs later I found Turnkey Linux, and I updated from there). Now I'm running2.5.1 Stable:

Environment:
Redmine version 2.5.1.stable
Ruby version 1.9.3-p194 (2012-04-20) [x86_64-linux]
Rails version 3.2.17
Environment production
Database adapter Mysql2
SCM:
Subversion 1.6.17
Mercurial 2.2.2
Bazaar 2.6.0
Git 1.7.10.4
Filesystem
Redmine plugins:
progressive_projects_list 1.0.0
redmine_banner 0.0.9
redmine_ckeditor 1.0.16
redmine_dmsf 1.4.8 stable
redmine_dynamic_file_link 0.0.1
redmine_email_inline_images 1.0.0
redmine_image_clipboard_paste 1.0.0
redmine_issue_checklist 2.0.5
redmine_knowledgebase 3.0.4
redmine_logs 0.0.5
redmine_wiki_backlinks 0.0.2
redmine_wiki_books 0.0.3

Advice please?
-Justin

Replies (6)

RE: Inline images show as data:image/png;base64 - Added by Martin Denizet (redmine.org team member) about 6 years ago

Hi Justin,

Try to put your code between "!".
The following code:

!data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==!

Will output as:
Cheers,

RE: Inline images show as data:image/png;base64 - Added by Justin A about 6 years ago

Hi Martin,

Hey -- that works! Thanks for the tip.

Ok, now here's more details on the situation. I ran some experiments and this is what I see. The image is beng stored, but:
1) Textile won't let me paste an image from the paste buffer. (I'm using image_clipboard_paste plugin)
2) CKeditor does something to the node data when it saves the node (I'm using the Issues module), so that the image isn't visible -- even from a code/DOM inspector
3) If I change the editor back to Textile, then I can see the raw image data displayed -- it even has the "!" around it, but it's inside the <div> tag (class= wiki or contextual)
4) If I edit the node and remove extranious HTML and make sure its surrounded by "!" then the image displays.

Obviously I'd like to have this working so that the non-technical folks can just create or edit a node and paste in an image -- no fussing around with code syntax.

Here's a bit more of the code I see... Note -- some of the tags below don't show closing tags -- that's because I copied from Firebug and they're collapsed; this is just to make the code blow more readable.

Thanks again, --Justin

With Textile,
Cannot paste images from Windows7/Firefox paste buffer, nothing happens
Add raw image data (small sample image), surrounded by "!"
Displays image fine.
Code from Firebug:

<div id="journal-309-notes" class="wiki editable">
  <div class="contextual">
    <p>
      <img alt="" src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==">
    </p>
  </div>
</div>

Change Redmine settings/editor from textile to CKeditor,
View issue I just created above --> Image displays as code.
Code from Firebug:

<div id="journal-309-notes" class="wiki editable">
  <div class="contextual">
    !data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==!
  </div>

Add comment, paste in larger image from paste buffer (approx 300x300)
--> Upon save, no image is visible.
Code from Firebug:

<div id="journal-311-notes" class="wiki editable">
  <div class="contextual">
    <a title="Quote" rel="nofollow" data-remote="true" data-method="post" href="/issues/254/quoted?journal_id=311">
    <a title="Edit" onclick="$.ajax({url: '/journals/edit/311.js', type: 'get'}); return false;" href="#">
  </div>
  <p>
    <img alt="">
  </p>
</div>

Change Redmine settings back to Textile,
Raw image code appears.
Edit the issue, editor displays:

<p><img alt="" src="data:image/png;base64,iVBORw0 ..... " />

Remove html and leave it as --> !date:image.....!
Save,
And now the image is visible.

So, How would I go about fixing this so that I can paste images into the fields without having to change editors, correct "!" syntax's, etc.

Thanks in advance

RE: Inline images show as data:image/png;base64 - Added by Justin A about 6 years ago

I'm frustrated.
Does ANYONE have this working? Could somebody please share their architecture/platform so I can this to work?
Martin, I appreciate your comment, however that's simply not what I'm trying to do.
Anyone? Please.

RE: Inline images show as data:image/png;base64 - Added by Martin Denizet (redmine.org team member) about 6 years ago

Maybe you could "rewrite" the comments before saving to replace the img tags by ! ?

RE: Inline images show as data:image/png;base64 - Added by Justin A about 6 years ago

I tried this:
  1. Paste image (image shows in editor)
  2. switch to Source
  3. remove <img src=" and replace with !
  4. scroll down to bottom of encoded image data, replace " /> with !
  5. Submit

Still broken. I just see the encoded base64 data.

Plus, I work with a marketing group, and I'm trying to get them away from sending email from Outlook -- managing all of their work by firing emails to each other. Total mess.
There's no way anyone is going to futz with this. It has to either work totally seamlessly, or it's totally out the window.

Is it possible that there's some little bug in a graphic library? (badly installed ImageMagick or something)
I have no idea if either (A) Everyone uses this feature, and I'm just a poor clod who messed up his install, or (B) only a very few people use image pasting like this, and those folks either went through a painful process to get it working, or got lucky... and it's just a matter of time before a Redmine or plugin upgrade breaks it.

Is pasting an image from the clipboard a common feature? Do you use?

RE: Inline images show as data:image/png;base64 - Added by Timo Boehme over 2 years ago

We have same question. Data from clipboard is stored as data:image instead of image link but the browser should be compatible.

Any solution?

(1-6/6)