How to insert images into custom block type

Question

This might be a really stupid question because I am overlooking something really simple but here is my issue. I have created a custom block in the custom block library in Drupal 8. I would like to insert images into the block from the images folder in my theme (not upload images using ckeditor).

Normally in Drupal 7 I can manually insert the image using an tag and all is good. In Drupal 8 this method is not working for me. Here is an example of the code that I enter into the source view:

<img class="socialmedia" src="/themes/custom/mytheme/images/social_media/facebook.png" />

However this does not work - no image is being displayed. I have verified that the path is correct, the spelling is correct, and tried with and without the leading slash. Nothing works.

I found a similar question, but the answers supplied don't address the question as they use php code.

What has changed between Drupal 7 and 8 in this regard? What am I missing?

Thanks

Answer 1

With twig you can use {{ directory }} to point your theme directory.

Answer 2

Use the FormattableMarkup class for this:

$image = new FormattableMarkup('<img class="socialmedia" src="@image" />', [
          '@image' => '/themes/custom/mytheme/images/social_media/facebook.png'
        ]);

$block['your_element'] = $image;

From the FormattableMarkup docs:

When cast to a string, this object replaces variable placeholders in the string with the arguments passed in during construction and escapes the values so they can be safely displayed as HTML. See the documentation of \Drupal\Component\Render\FormattableMarkup::placeholderFormat() for details on the supported placeholders and how to use them securely. Incorrect use of this class can result in security vulnerabilities.