The setup consists of Drupal 8 + Webform (ver. 5.6 - https://www.drupal.org/project/webform/releases/8.x-5.6) + CKEditor Image Upload (https://www.drupal.org/project/ckeditor_uploadimage). This allows for users to copy and paste screenshots of issues into CKEditor easily.

When the user takes a screenshot and then uses CTRL+V to paste into CKEditor - the image is uploaded to the server and it works perfectly.

The problem arises when the user right clicks within CKEditor and selects "paste" from CKEditor's right click context menu - it then embeds the image directly (data uri - eg.

<img data-widget="uploadimage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiwAA....) 

which isn't a problem, until I the email is sent.

I'm using a Twig Template for the body of the message (it's being emailed / pushed into a ticketing system, thus the need to customize the look) and the code is the following:

{% set upload_screenshot = webform_token('[webform_submission:values:upload_screenshot]', webform_submission) %}

{% if upload_screenshot %}
        <p><strong>Screenshot(s):</strong></p><p> {{ upload_screenshot }}
        {# Used to try to debug why data uris weren't rendering - with webform debug it displays data uri images, but the downside is that it doesn't render regular image uploads. #}
        {#{{ webform_debug(upload_screenshot) }}#}</p>        
    {% endif %}

If I use the "Default" template, any type of image (whether uploaded or as an embedded image) works fine. So I'm starting to think it's the way that webform_token processes / outputs the information.

When I inspect the code in the broken image, I notice that the data: is removed from the src

<img data-widget="uploadimage" src="image/png;base64,iVBORw0KGg )

For the meantime I'm disabling the right click context menu with this module. (https://www.drupal.org/project/ckeditor_browser_context_menu)

Any ideas on how I can get the images (whether uploaded or embedded) in a custom twig email template would be appreciated.

  • Have you tried the :raw token? so webform_submission:values:upload_screenshot:raw - or is there none?
    – nhck
    Commented Apr 23, 2020 at 18:27
  • Yes, I tried that with no luck unfortunately. It outputs the img tag, but with the data: missing again, and therefore the image is broken. FYI - this is what I tried. {% set upload_screenshot = webform_token('[webform_submission:values:upload_screenshot:raw]', webform_submission) %} {% if upload_screenshot %} <p><strong>Screenshot(s):</strong></p><p> {{ upload_screenshot }}</p> {% endif %}
    – B.Friddy
    Commented Apr 23, 2020 at 19:52

1 Answer 1


The trimmed "data:" might be considered as the protocol and not match the filter_protocols settings in /sites/default/services.yml.

Problem with text format and base64 inline images

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.