2

When I use echo $src I get the following result:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+

If I print $src inside <img> tags, the image is not rendering properly: data: is automatically cut off from the URL.

<img src="image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+">

This is the field formatter I am using.

class ImageDefaultFormatter extends FormatterBase {
  /**
   * {@inheritdoc}
   */
  public function viewElements(Drupal\Core\Field\FieldItemListInterface $items, $langcode) {
    $elements = array();
    foreach ($items as $delta => $item) {
      if (isset($item->value)) {
        $src = $item->value;
        $elements[$delta] = array('#markup' => '<img src="'.$src.'">');
      }
    }
    return $elements;
  }
}
  • for time being I did it through javascript. I print the $src in a wrapper div and then used jQuery to create image using printed $src data. Not able to figure out whats wrong by printing image using php. – ARUN May 26 '17 at 9:40
3

Try this:

use Drupal\Component\Render\FormattableMarkup;

$src = $item->value;
$image = new FormattableMarkup('<img src=":src"/>', [':src' => $src]);
$elements[$delta] = [
  '#markup' => $image,
];
| improve this answer | |
  • 1
    or [ '#markup' => Markup::create('<img src="data:image/png;base64,' . $data . '"/>') ] – edwardaa Aug 26 '17 at 8:44
2
$form['base64_image'] = [
  '#type' => 'inline_template',
  '#template' => "<img width='100px' height='100px' src='{{ data }}' />",
  '#context' => [
    'data' => $base64_image_data,
  ],
];
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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