Data:image inside url();


The following does not work:

echo “<div style=‘width: 160px; height: 105px; background: url(‘data:image/jpg;base64,$image_src’); background-size: cover;’>”;

But, when I use it like this it works:

<img src=“data:image/jpg;base64,$image_src” style=“width: 160px;”>

Anyone who knows why?



Hi qrazyneo1,

It could be the mix of quoting, the single quoted style attribute is broken by the next single quote in the background url.

I think you have three options to fix this: :slight_smile:

  • You could try with the background url unquoted to not break the style attribute.

  • You could try change the backgroud’s single quoted url to double quotes, the url double quotes would then be wrapped by the style’s single quotes and not break the echo.

  • You could change the style single quotes to escaped double quotes to wrap the url quote without breaking the echo.



echo? HTML? echo?



Probably PHP, I would have moved it if I knew to what: :slight_smile:



In my limited experience (unix) echo wouldn’t allow the first level of execution so the substitution wouldn’t take place. Does PHP allow the data substitution to be executed?



It is PHP, yes, and you’re correct that it’s the quoting doing it… perhaps some homemade syntax hilighting would help visualize the problem… here’s what it looks like when you put just the HTML in place…

<div style='width: 160px; height: 105px; background: url('data:image/jpg;base64,hyergiblergiimgdata'); background-size: cover;'>

While it should look like

<div style="width: 160px; height: 105px; background: url('data:image/jpg;base64,hyergiblergiimgdata'); background-size: cover;">

OP, as @Erik_J says, escape your quotes, escape your PHP block, or use an alternate string style.



The approach I would take is to Google for a working example, copy, paste and ensure the example works.

After validation, gradually change a single value until your image, etc renders to your specific requirements.


But, when I use it like this it works:

The supplied script has different double quotes. The first are incorrect and appear to come from something like Word.



I think this is a recent Discourse feature; to automatically change simple quotes to fancy quotes if not code formatted.

I think so:



Thank you for the link, @Erik_J. I can’t honestly say that I followed everything that I read. Maybe I should restate the basis of my question (which was pretty simple) and at least it will be obvious where it came from. IIRC, UNIX shell “echo” would allow escaped characters to be read properly but the execution of the resulting string required it to be piped to a utility that would execute it. “Echo” did not execute anything, it just repeated a string to the screen or to a pipe after honoring escaped characters… all under the umberella of UNIX. Perhaps php does almost the same thing the “php way” and I don’t know that language. Heck, I barely remember snippits from UNIX shells. Sorry for the distraction but thank you for indulging the question.



I like PHP because it is a Server Side scripting language that generates HTML text which is sent to the user’s browser.

Usually Servers are very fast and very flexible…


  $canonical = 'https://' .$_SERVER['SERVER_NAME'] .$_SERVER['REQUEST_URI'];
  $title     = 'John_Betong\'s Web-page';
  $style     = '/* style-sheet.css */'; // file_get_contents('style-sheet.css');
  $extraCss  = 'body {width:88%; margin:1em auto; border: dotted 3px red;}';
  $logoSvg   = '<b style="float:left">logo.svg goes here</b>'; // file_get_contents('../assets/img/logo-001.svg');
  $topLinks  = '<div style="text-align:center;">topLinks goes here</div>'; // file_get_contents('topLinks.html');
  $btnBar    = 'btnBar goes here'; // file_get_contents('btnBar.php');
  $content  = 'Content goes here';

// using PHP HereDoc String type
$result = <<< ______TMP
<html lang='en'>
<title> $title </title>
<meta charset="utf-8">
<meta name="description" content="$title" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="canonical" href="$canonical">
<style> $style $extraCss </style>

  <div class="pof pot w99 tac z02 mgb">
      viewBox="0 0 50 50" 
      width="100%" height="100" 
      <polygon points="0,50   50,0   50,50" fill="#aff"></polygon>
      id="logo" class="pof pot p42" 
    <div class="w99 pof pot fss tac">
      <h1 class="tac"> $title </h1>
  <div class="mgt"> just testing</div>
  <div id="content"> $content </div>

// === Shrink HTML =========
   $aToRemove = ["  ", "\n","\r","\t"]; // double-spaced, line feeds, tabs, etc
   $aToReplace = " "; // single-space
   $shrink = str_replace( $aToRemove, "", $result);

// Output HTML text to browser
   echo $shrink; // output HTML text to browser

Shrunk results to be sent to browser:`

<!DOCTYPE HTML><html lang='en'><head><title> John_Betong's Web-page </title><meta charset="utf-8"><meta name="description" content="John_Betong's Web-page" /><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"><link rel="canonical" href="https://localhost/"><style> /* style-sheet.css */ body {width:88%; margin:1em auto; border: dotted 3px red;} </style></head><body>  <div style="text-align:center;">topLinks goes here</div> <hr><div class="pof pot w99 tac z02 mgb"><b style="float:left">logo.svg goes here</b><svg preserveAspectRatio="none" viewBox="0 0 50 50" width="100%" height="100" class="bgs" ><polygon points="0,50 50,0 50,50" fill="#aff"></polygon></svg><div class="btn fgr"> btnBar goes here </div><a id="logo" class="pof pot p42" href="" title="SitePoint"></a><div class="w99 pof pot fss tac"><h1 class="tac"> John_Betong's Web-page </h1></div></div><div id="content"> Content goes here </div></body></html>

Screen Dump:



closed #11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.