Image is "broken" with Custom Email Twig Template sending with Webform

Question

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.

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